Xah Lee, 2005, 2011-03-30
This page is a example of using CSS to format tabular data, without using the html <table> tag.
You can use HTML “table” tag to show data in a table format. (See: HTML Table Examples.) However, it is not widely known that table format can also be done with pure CSS, without any use of the “table” tag.
Here's a example of CSS table rendered in your browser:
Here's the how you do it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>CSS Table Example</title> <style type="text/css"> .a, .b, .c1, .c2 {border:solid thin red} .a {display:table} .b {display:table-row} .c1, .c2 {display:table-cell} </style> </head> <body> <div class="a"> <div class="b"> <div class="c1">pa</div> <div class="c2">re</div> </div> <div class="b"> <div class="c1">ci</div> <div class="c2">vo</div> </div> <div class="b"> <div class="c1">mu</div> <div class="c2">xa</div> </div> </div> </body> </html>
The essence is that css has these
display:table,
display:table-row,
display:table-cell. They emulate the tags “table”, “tr”, “td”.
These are supported across all browser as of 2010-03.
Here's a test page: CSS Table Example.
blog comments powered by Disqus