CSS: Table Layout

By Xah Lee. Date: . Last updated: .

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

Example. CSS Table

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

cat
dog
red
blue
milk
eggs

Code

<div class="xtable">
  <div class="xrow">
    <div class="xcell">cat</div>
    <div class="xcell">dog</div>
  </div>
  <div class="xrow">
    <div class="xcell">red</div>
    <div class="xcell">blue</div>
  </div>
  <div class="xrow">
    <div class="xcell">milk</div>
    <div class="xcell">eggs</div>
  </div>
</div>
.xtable {
 border: solid thin red;
 display: table;
}

.xrow {
 display: table-row;
}

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

CSS Properties for Table Layout

Here is 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)
column, row, group “display” values
CSSHTML
display:table-row-grouptbody
display:table-columncol
display:table-column-groupcolgroup

HTML Table

CSS, Layout