.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Runnable snippet:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>
Answer from Shiva Komuravelly on Stack Overflow
🌐
W3Schools
w3schools.com β€Ί css β€Ί css_table.asp
CSS Styling Tables
The CSS border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.
🌐
W3Schools
w3schools.com β€Ί html β€Ί html_tables.asp
HTML Tables
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
Discussions
html - How create table only using tag and Css - Stack Overflow
I want to create table only using tag and CSS. This is my sample table. More on stackoverflow.com
🌐 stackoverflow.com
Tables in HTML
I use tables when I actually need a table. I'm talking about showing data or information in a way that a table was originally meant for. For everything else I'm using grid, flexbox, etc. What's gone are the days of using tables for layout purposes. I think the only time I ever see people using tables for layout purposes are in HTML emails. I've been using the MJML library, but even when I look at the source code it generates, it has tables in there. More on reddit.com
🌐 r/Frontend
16
0
October 1, 2023
37 Simple and Useful Table Templates & Examples for Web Developers
Tables? Maybe for the .00001% cases where grid and flex don't work. More on reddit.com
🌐 r/css
3
23
December 18, 2021
Are tables still used to create a layout?
By "no CSS" do you also mean no style tags? No style attributes? Without CSS, tables are the only way to create that design. Tables should generally not be used for page layout, but if you can't use CSS, you have bigger concerns than best practices. More on reddit.com
🌐 r/web_design
21
10
April 28, 2021
Videos
03:58
🌐 YouTube
Learn HTML tables in 3 minutes πŸ“Š - YouTube
August 24, 2021
299K
06:34
🌐 YouTube
How to Create and Style a Table with HTML & CSS | Step by Step ...
March 29, 2024
🌐 youtube.com
27 | HOW TO CREATE & STYLE TABLES IN HTML | 2023 | Learn HTML and ...
February 19, 2023
11:53
🌐 YouTube
πŸ”₯ How to Design a Stunning Table Using CSS (Step-by-Step Tutorial!)
March 16, 2025
05:25
🌐 YouTube
How to make Simple Table Design Using HTML & CSS - YouTube
September 11, 2024
06:22
🌐 YouTube
HTML Tables: Full HTML/CSS/JS Course - YouTube
September 26, 2022
View all
View all
🌐
MDN Web Docs
developer.mozilla.org β€Ί en-US β€Ί docs β€Ί Learn_web_development β€Ί Core β€Ί Styling_basics β€Ί Tables
Styling tables - Learn web development | MDN
October 14, 2025 - To do this, add the following to the bottom of your style.css file: ... There is nothing remarkable here, except for the caption-side property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table. ... html { font-family: "Helvetica", "Arial", sans-serif; } table { table-layout: fixed; width: 90%; margin: 10px auto; border-collapse: collapse; border-top: 1px solid #999999; border-bottom: 1px solid #999999; } th, td { vertical-align: top; padding: 0.6em; } tr :nth-child(2), tr :nth-child(3) { text-align: right; width: 15%; } tr :nth-child(1
🌐
Piccalilli
piccalil.li β€Ί blog β€Ί styling-tables-the-modern-css-way
Styling Tables the Modern CSS Way - Piccalilli
Our table columns should now all have equal widths, but we might want our a different size for our first column (which contains the row headers). If we set a width on the first <th> element, we can then see that the remaining horizontal space will be distributed evenly between the rest of the columns. ... Go ahead and toggle the HTML or CSS panel to see how our table responds, responsively.
🌐
W3Schools
w3schools.com β€Ί css β€Ί css_table_style.asp
CSS Table Styling
CSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support ... To add some more space between the inner borders and the content in a table, use the padding property on <td> and <th> elements:
🌐
FreeFrontend
freefrontend.com β€Ί css-tables
25 CSS Tables | FreeFrontend
This collection offers modern solutions for table layout and styling that go beyond standard HTML. Responsive techniques that transform rows into cards on mobile devices using attr(data-label) are detailed. Visual enhancements include β€œzebra striping” via :nth-child, hover highlighting, and fixed headers with position: sticky. For complex layouts, CSS Grid implementation is demonstrated, providing flexible column control and scrollable areas with pinned elements.
Find elsewhere
🌐
GeeksforGeeks
geeksforgeeks.org β€Ί css β€Ί css-tables
CSS Tables - GeeksforGeeks
21:28
With CSS, you can adjust borders, spacing, colors, alignment, and even add hover effects to make data more organized and visually appealing. ... <html> <head> <style> table { width: 50%; border-collapse: collapse; margin: 20px auto; } th, td ...
Published Β  November 4, 2025
🌐
Bootstrap
getbootstrap.com β€Ί docs β€Ί 5.0 β€Ί content β€Ί tables
Tables Β· Bootstrap v5.0
To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our CSS. Since we need to target all the tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it.
🌐
Stack Overflow
stackoverflow.com β€Ί questions β€Ί 3053205 β€Ί how-create-table-only-using-div-tag-and-css
html - How create table only using tag and Css - Stack Overflow
Top answer
1 of 11
302
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Runnable snippet:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}
<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>
2 of 11
93

divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.

🌐
Flowbite
flowbite.com β€Ί docs β€Ί components β€Ί tables
Tailwind CSS Table - Flowbite
Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite. Use the following example of a responsive table component to show multiple rows and columns of text data. Edit on GitHub Β· Toggle full view Β· Toggle full screen Β· Toggle tablet view Β· Toggle tablet view Β· Toggle mobile view Β· Toggle mobile view Β· RTL Β· Toggle RTL mode Β· Toggle dark/light mode Β· Toggle dark mode Β· Loading... HTML Β·
🌐
freeCodeCamp
freecodecamp.org β€Ί news β€Ί html-tables-table-tutorial-with-css-example-code
HTML Tables – Table Tutorial with Example Code
September 7, 2021 - Tables are a great way to represent tabular data, and you can create them using basic HTML elements like <table>,<tr>, <td>. And you can also add some styling to make them look good and present the data clearly with the help of a CSS file.
🌐
Shay Howe
learn.shayhowe.com β€Ί html-css β€Ί organizing-data-with-tables
Organizing Data with Tables - Learn to Code HTML & CSS
Today tables are used specifically for organizing data (like they should be), and CSS is free to get on with the jobs of positioning and layout. Building data tables still has its challenges. How a table should be built in HTML depends largely on the data and how it is to be displayed.
🌐
DigitalOcean
digitalocean.com β€Ί community β€Ί tutorials β€Ί how-to-style-a-table-with-css
How to Format and Style HTML Tables Using CSS | DigitalOcean
July 18, 2025 - Learn how to style an HTML table with CSS using borders, padding, and zebra stripes. Follow this step-by-step guide to create clean and accessible tables today.
🌐
Codecademy
codecademy.com β€Ί forum_questions β€Ί 54e3e5b686f552e77500148e
CSS and tables | Codecademy
(part 5) Notice how much easier it is to replicate these tables than if they were full of img elements with src attributes? What’s more is we can still lay content over top of the image, namely, data. Let’s add some captions to each image. This time we have to get into the HTML.
🌐
Divtable
divtable.com β€Ί table-styler
HTML Table Styler β–¦ CSS Generator | π——π—œπ—©π—§π—”π—•π—Ÿπ—˜.𝗖𝗒𝗠
Free online interactive HTML Table and structured div grid styler and code generator. Select a style from the gallery and adjust the settings to get the HTML and CSS codes.
🌐
TablesGenerator
tablesgenerator.com β€Ί html_tables
HTML Tables generator – TablesGenerator.com
The generated code consists of two parts: <style> tag and <table> tag. The first one should be copied and put just before the </head> tag of your website, while the latter (i.e. table code) should be placed in the desired location. As you probably noticed there is a select box "--Table theme--" ...
🌐
Colorlib
colorlib.com β€Ί home β€Ί website templates β€Ί 29 beautiful css3 table templates & examples [html] 2025
29 Beautiful CSS3 Table Templates & Examples [HTML] 2025
August 14, 2025 - Please do if you want to brand any of the two table designs. You can change the color and make them follow your regulations precisely. These support MANY different aims and intentions, catering to various purposes. Create a class timetable or share other information; anything is possible. Download Preview Β· These HTML5 & CSS3 tables have highlights for vertical and horizontal rows.
🌐
GeeksforGeeks
geeksforgeeks.org β€Ί html β€Ί html-tables
HTML Tables - GeeksforGeeks
04:37
<!-- index.html --> <!DOCTYPE html> ... <td>41</td> </tr> </table> </body> </html> ... Uses border-collapse: collapse; and border properties to create a clean, single-bordered table....
Published Β  1 month ago
🌐
DataFlair
data-flair.training β€Ί blogs β€Ί html-tables
HTML Tables - CSS Styling Tables - DataFlair
July 26, 2024 - HTML Tables are of utmost importance for the systematic representation of data. In this article, we’ve looked at the creation of tables using the <table>, <tr> and <td> tags. We’ve also looked at the formatting of tables using CSS, such as setting alignment, padding, border-collapse, background, caption, column and row spanning, etc.
🌐
DEV Community
dev.to β€Ί dcodeyt β€Ί creating-beautiful-html-tables-with-css-428l
Table CSS: Creating beautiful HTML tables with CSS - DEV Community
September 6, 2022 - Let's write some boilerplate HTML code for the table. <table class="styled-table"> <thead> <tr> <th>Name</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Dom</td> <td>6000</td> </tr> <tr class="active-row"> <td>Melissa</td> <td>5150</td> </tr> <!-- and so on... --> </tbody> </table> ... .active-row which will be the "active" row - this class is used to highlight a specific row and will get it's own CSS as we'll see soon
Related queries
table html
html table css generator
html table css border
html table css w3schools
html table css examples
html table border without css
html table css examples beautiful
html table style examples