Tableless Tables

Album Cover: In Rainbows

"Words are a sawed-off shotgun."
Radiohead / Jigsaw Falling Into Place

Posted on February 05, 2004 2:33 PM in Web Development
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

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

Henrietta Thomas on November 22, 2004 at 11:04 AM:

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

The Ape!! on August 02, 2006 at 11:18 PM:

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

Permalink

Brian on October 27, 2006 at 6:57 AM:

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.

Permalink

williamn on July 31, 2007 at 3:31 AM:

Thank you for writing such a good post.
It help me alot.

Permalink

r3code on September 27, 2007 at 12:13 AM:

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?

Permalink

nlmi on November 06, 2007 at 11:42 AM:

How to make a table less table which also has rounded corners?

Permalink

johnrobin on January 03, 2008 at 7:18 PM:

@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)...

Permalink

Xanthir, FCD on February 22, 2008 at 8:18 AM:

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.

Permalink

Bernie Zimmermann on February 22, 2008 at 9:13 AM:

Xanthir, I get the feeling that you really like the idea of tableless tables.

Permalink

Manny on September 13, 2008 at 9:36 AM:

Sir I like your nice explanation but i want more clarity about
tableless tables with div tag in dreamweaver

Permalink

JakBam on November 24, 2008 at 9:20 AM:

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.

Permalink

Armin on June 13, 2009 at 2:14 AM:

A brief history of the structure-presentation dichotomy and the table tag: http://tinyurl.com/tableless

Permalink

TableLover on March 12, 2010 at 6:15 AM:

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!

Permalink

robbie70 on May 20, 2010 at 7:53 AM:

Thank you, nice example and useful comments, especially Xanthir's. Glad that this topic is still relevant in today's programming environments.

Permalink

Katya on January 22, 2011 at 6:55 PM:

Even in 2011 this code is awesome! very helpful thank you :)

Permalink

Dragon's Eye, The Eclipse Dragon on March 01, 2011 at 6:43 PM:

Nice to see such a simple example here!

Just amazing how hard some other informative folk make things.

I would like to add that I still use "table" tags for some content because I just don't see a decent, workable replacement for my needs. CSS tags are a great way to extend the capabilities of many of our ordinary HTML-tags. I just don't see so quickly giving the "table" tag the "heave-ho" as it does still serve some beneficial uses.

I would like to add that some CSS usage also is great for effects that used to only be possible with Javascripts! I especially like the ability for something to change when the mouse hovers over it. ( And this bit of CSS you presented would do well there too! )

Nice bit-o-work!

Permalink

Henrique Kywal on June 13, 2011 at 1:15 PM:

Excellent post!
I have a doubt about how align text verticaly in each cell.

Nice job

Permalink

Me, Myself, & I on January 04, 2012 at 1:04 PM:

Tableless tables are a great way to display large data sets because tbody elements don't support the overflow style. How do you scroll large data sets without losing the header? I haven't seen a way to do it yet that is simple.

Permalink

xvader on April 01, 2012 at 8:27 AM:

hi, in your example there were 4 columns, how to add 4 more columns so that will make a total of 8 columns? i've tried it by adding < td > lines in the < th > and < tr > tags, but what i got is still 4 columns, not 8.

*ignore my previous comment, the tags i wrote was ignored by the cms*

Permalink

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.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.