Pure CSS Table

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

Here is a example of CSS table rendered in your browser:

Here is the HTML code:

<div class="xtable722">
  <div class="xrow72">
    <div class="xcell72">one</div>
    <div class="xcell72">two</div>
  </div>
  <div class="xrow72">
    <div class="xcell72">three</div>
    <div class="xcell72">four</div>
  </div>
  <div class="xrow72">
    <div class="xcell72">five</div>
    <div class="xcell72">six</div>
  </div>
</div>

Here is the CSS code:

.xtable722 {
border:solid thin red;
display:table;
}

.xrow72 {
display:table-row;
}

.xcell72, .xcell72 {
display:table-cell;
border:solid thin red;
}

CSS Attributes for Table Layout

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

[see HTML Table, thead, tbody, tfoot]

[see HTML Table, colgroup, col]