I think one of the most daunting tasks of making the switch to tableless web design is figuring out how the heck you're going to display information that naturally belongs in tables. Afterall, it's this type of information that the <table> tag was invented for in the first place.
I decided to challenge myself a bit today and try to find a purely CSS-based solution to displaying data in a table-like format, without touching a single <table>, <th>, <tr> or <td> tag. As it turns out, it only took a few tweaks (to please the important browsers like Firebird, Internet Explorer 6 and Opera) to find a reasonable alternative to using tables.
If you take a look at my Tableless Tables example and corresponding stylesheet, you'll quickly see that the amount of code necessary to mimic an old school HTML table with CSS is minimal and perhaps even less than that necessary to write up an actual HTML table.
In the example, I used the same "table" code three times, each time in a wider parent DIV with a different font family and size, to show that the table is scalable. There are of course modifications that would need to be made (in terms of color, column widths, etc.) to fit the particular needs of other sets of data, but my example serves as more of a proof of concept to show that tables can be created through pure CSS.
The following CSS code is all I really needed to emulate an HTML table using only CSS and the staple of tableless design, the DIV tag:
.table {
width: 100%;
border: 1px solid #f00;
}
.table .th {
background-color: #f00;
color: #fff;
font-weight: bold;
border-bottom: 1px dotted #f00;
}
.table .tr:nth-child(odd) {
background-color: #eee;
}
.table .td {
float: left;
width: 23%;
padding-left: 2%;
}
You could typically get the exact same effect omitting the tr:nth-child rule, but I threw that in there for the "cool" effect. This rule is actually a part of the CSS3 selector set, and if your browser was capable of rendering it correctly (I'm willing to bet it isn't, at least at the time of posting) you'd see alternate background colors on the table rows (alternating between white and light gray).
Feel free to view the source of my example to get a better idea of what tableless tables involve. If you have any questions about the approach I took, feel free to contact me.
Comments
Hi man!
Good article.
I was thinking about it, and decided to google for it.
But then I started to think... Aren't we to drastic in changing everything too tableless desing?
Sure pages shouldn't be coded all by <table>, but when we want to display some data that is in a table way, I think we should use the tag.
As it was created to do this job...
Thanks anyway!
[]'s
Excellent! After several long hours of searching for "table-less css design," here it is in the simplest of ways! The so-called "experts" don't have a clue. Appreciate you taking the time to share your examples.
Thank you for writing such a good post.
It help me alot.
There is a problem with odd rows colour! It's not working without CSS3 support but even I replace it with manual .th.odd {background: #CCC;} and adding to .td {...; background: transparent; }
In FF my addings working but not in IE6, I don't know why IE has a render bug.
It can be eliminated if we add the "border" attribute for .th class
.th {
border: 1px Solid Grey;
}
There is working code. May be you know another one way to do Tabless Table compatible with all browsers?
How to make a table less table which also has rounded corners?
@r3code
In FF my addings working but not in IE6, I don't know why IE has a render bug.
try using 6-digit code color (rrggbb)...
Um... I don't get it.
CSS was meant to free us from table-based designs, not replace tables entirely. Tables can and should be used for displaying actual tables of data.
CSS tables like these lose several of the special table features, such as auto-scaling column widths to the data. As well, they can't be read properly by screen readers (in other words, "screw you, blind people!"). Finally, if this page is viewed in a non-CSS browser, you lose *all* sense of the table, while using actual <table> tags would preserve it in any device that actually renders HTML.
HTML is meant to give semantics to your data. If you have a table of data, use the <table> tag! That has actual semantics; it means "this stuff is a table". Divs have no semantics. They don't mean anything. Classes have no semantics either, as there aren't any well-defined and meaningful tags shared among User Agents and search engines. Your entire 'table' is a meaningless mishmash of data to automated tools.
To recap: Tables are bad for design. You should use CSS to position the elements of your page, rather than building tables that bloat your code and are difficult to maintain. Tables are good for displaying tabular data. You should use tables to hold tabular data, rather than hacking in CSS to develop something that looks like a table but has none of the semantics.
Xanthir, I get the feeling that you really like the idea of tableless tables.
Sir I like your nice explanation but i want more clarity about
tableless tables with div tag in dreamweaver
I completely agree that we should use table-less layouts for the sections, columns, etc...My dilemma is, should we also do that for displaying data ?
I find it much easier to display data in a nice CSS enhanced table instead a fully CSS emulated table.
But i want to comply to these new standards...I know that we should use DIVs for SEO purposes, but there's much more coding involved.
A brief history of the structure-presentation dichotomy and the table tag: http://tinyurl.com/tableless
I realize that this is an old post, but come on - this must be a joke?!
I completely agree with Xanthir here. Tabes should not be used for design purposes, but it’s quite ok to use them (and semantically correct might I add) for actual tables of data.
Even back in 2004 that should be self-evident!
Thank you, nice example and useful comments, especially Xanthir's. Glad that this topic is still relevant in today's programming environments.
Post Comments
If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.
Thanks for posting such a clear explanation of how to make tableless tables. I used your sample code to construct my own code to create headline 'banners' on my site. Here is the CSS:
.headline {
margin-left: 30%;
margin-right: 30%;
font-family: monospace;
font-size: 120%;
font-weight: bold;
text-align: center;
padding: 5px;
background-color: #fff;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
}
and here is the html:
<div class="headline">May There Be A Road <br>by<br>Louis L'Amour</div>
I am a complete newbie, and it was much easier than I thought, thanks to your clear explanations and examples.
Permalink