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:
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.
CSS | HTML |
---|---|
display:table | HTML table |
display:table-row | tr (row) |
display:table-cell | td (table cell) |
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]
CSS | HTML |
---|---|
display:table-row-group | tbody |
display:table-column | col |
display:table-column-group | colgroup |