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]

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

CSS

Basics

Color

Font

Box Model

Layout

Transform/Animation

Line Wrap, Justification

Box Decoration

Misc