Pure CSS Table

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:

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

CSS	HTML
display:table	HTML table
display:table-row	tr (row)
display:table-cell	td (table cell)

caption, header, footer, 「display」 values

CSS	HTML
display:table-caption	caption
display:table-header-group	thead (table header row; th group)
display:table-footer-group	tfoot (table footer row)

[see HTML Table, thead, tbody, tfoot]

column, row, group 「display」 values

CSS	HTML
display:table-row-group	tbody
display:table-column	col
display:table-column-group	colgroup

[see HTML Table, colgroup, col]