Pure CSS Table

Xah Lee, 2005-12-30, …, 2013-03-17

This page is a example of using CSS to format tabular data, without using the HTML <table> tag.

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

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}

(For the complete raw HTML file, see: CSS Table Example.)

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

• display:table = HTML table
• display:table-row = tr (row)
• display:table-cell = td (table cell)
• display:table-caption = caption
• display:table-row-group = tbody
• display:table-header-group = thead (table header row; th group)
• display:table-footer-group = tfoot (table footer row)
• display:table-column = col
• display:table-column-group = colgroup