Pure CSS Table

By Xah Lee. Date: . Last updated: .

CSS can emulate the <table> tag. So, traditional layout using the table tag can be done with pure CSS.

Here's a example of CSS table rendered in your browser:

one
two
three
four
five
six

Here's the HTML code:

<div class="a">
  <div class="b">
    <div class="c1">one</div>
    <div class="c2">two</div>
  </div>
  <div class="b">
    <div class="c1">three</div>
    <div class="c2">four</div>
  </div>
  <div class="b">
    <div class="c1">five</div>
    <div class="c2">six</div>
  </div>
</div>

Here's the CSS code:

.a, .b, .c1, .c2 {border:solid thin red}
.a {display:table}
.b {display:table-row}
.c1, .c2 {display:table-cell}

CSS Attributes for Table Layout

Here's a full list of values for the display attribute to emulate table tags.

Basic HTML Table 「display」 values
CSSHTML
display:tableHTML table
display:table-rowtr (row)
display:table-celltd (table cell)
caption, header, footer, 「display」 values
CSSHTML
display:table-captioncaption
display:table-header-groupthead (table header row; th group)
display:table-footer-grouptfoot (table footer row)

[see HTML Table, thead, tbody, tfoot]

column, row, group 「display」 values
CSSHTML
display:table-row-grouptbody
display:table-columncol
display:table-column-groupcolgroup

[see HTML Table, colgroup, col]

HTML Table

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog