
Smashing Magazine we smash you with the information that will make your life easier. really.
Top 10 CSS Table Designs
August 13th, 2008 in CSS, Events | 299 Comments
By R. Christie
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
<!-- Table markup--> <table id="..."> <!-- Table header --> <thead> <tr> <th scope="col" id="...">...</th> ... </tr> </thead> <!-- Table footer --> <tfoot> <tr> <td>...</td> </tr> </tfoot> <!-- Table body --> <tbody> <tr> <td>...</td> ... </tr> ... </tbody> </table>
You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package is provided in the end of the article.
Before we start, let’s review the general rule of thumb for styling of tables:
- Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the
widthof thetableto100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width. - Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
- Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.
Now that we are all set up let’s get going, shall we?
1. Horizontal Minimalist
Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
The tr:hover rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.
- Important!
- Carefully finetune the typography and the padding between the cells
- Pros
- Very easy to style, good for simple tables
- Cons
tr:hoverrules don’t work in IE 6, table can be confusing if it has too many columns- Play with
- Color scheme, typography,
tr:hovereffects
2. Vertical Minimalist
Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug’s Life |
Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.
- Important!
- Carefully finetune the typography and the padding between the cells, do not add
tr:hovereffect - Pros
- Easy to style, good for simple tables
- Cons
- Can not be used if background is not a solid block of color, suitable only for some tables
- Play With
- Color scheme and typography
3. Box
The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug’s Life |
This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.
- Important!
- Choose a color scheme that matches with your site
- Pros
- Easy to style, flexible for large or small tables
- Cons
- Choosing the perfect color scheme could be tricky
- Play with
- Colors and borders, use
dashedordottedto achieve cute effects, typography, icons
4. Horizontal Zebra
Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).
... <tr class="odd"> <td>...</td> ... </tr> <tr> <td>...</td> ... </tr> ...
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
- Important!
- Do not put too much contrast on the zebra colors, you can blind your users
- Pros
- The zebra pattern can help people to scan the table
- Cons
- Adding
class="odd"manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky - Play With
- Contrasting color, borders, typography, icons
5. Vertical Zebra Style
Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:
<table> <!-- Colgroup --> <colgroup> <col class="vzebra-odd"> <col class="vzebra-even"> <col class="vzebra-odd"> <col class="vzebra-even"> </colgroup> <!-- Table header --> <thead> <tr> <th scope="col" id="vzebra-comedy">Employee</th> ... </tr> </thead> ... </table>
The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Scary Movie | Indiana Jones | The Punisher | Wall-E |
| Epic Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Finding Nemo |
| Dr. Dolittle | The Mummy | 300 | A Bug’s Life |
Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.
- Important!
- Do not put too much contrast on the zebra colors, you can blind your viewer
- Pros
- Suitable for all types of tables
- Cons
- Choosing the color scheme could be tricky, need to add
colgroupelements - Play With
- Contrasting color, borders,
colgroupandcol, icons and typography
6. One Column Emphasis
In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).
- Important!
- Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
- Pros
- Very effective when used in certain kind of tables
- Cons
- The necessary
tr:hovereffect does not work in IE, suitable for certain types of tables only - Play with
- Color scheme, typography, icons and
tr:hovereffects
7. Newspaper
To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| The above data were fictional and made up, please do not sue me | ||||
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
| Favorite | Great | Nice | Bad |
|---|---|---|---|
| Passion of the Christ | Bourne Ultimatum | Shoot ‘Em Up | Ali |
| The Big Fish | The Mummy | Apocalypto | Monster |
| Shawshank Redemption | Cold Mountain | Indiana Jones | Dead or Alive |
| Greatest Story Ever Told | I Am Legend | Star Wars | Saw 3 |
- Important!
- Be careful with
border-collapse, do not lose the signature border around the table! - Pros
- Gives a royal, authorative aura to a table
- Cons
- Unsuitable for large tables (it loses it’s charm on large tables)
- Play With
- Typography, color scheme, background, border, padding, and
tr:hovereffects
8. Rounded Corner
Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| The above data were fictional and made up, please do not sue me | ||||
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 50.2 | 40.63 | 45.23 | 39.3 | |
| Apple | 25.4 | 30.2 | 33.3 | 36.7 |
| IBM | 20.4 | 15.6 | 22.3 | 29.3 |
- Pros
- Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily
- Cons
- Takes longer to style, requires images
- Play With
- Color scheme, corner variations, typography,
tr:hovereffects, icons
9. Table Background
If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:
* html table tbody td
{
/* IE CSS Filter Hack goes here*/
}
The table would look like this:
| Employee | Division | Suggestions | |
|---|---|---|---|
| IE 6 users won’t see the transparent background if the hack is not applied | |||
| Stephen C. Cox | Marketing | Make discount offers | |
| Josephin Tan | Advertising | Give bonuses | |
| Joyce Ming | Marketing | New designs | |
| James A. Pentel | Marketing | Better Packaging | |
- Important!
- Make sure the image is relevant to the table’s contents
- Pros
- Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer
- Cons
- Needs hack to get the background work in IE 6, needs images
- Play With
- Background images, transparent PNGs, typography, colors, icons
10. Cell Background
You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that’s not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You’ll end up with a gradient style table:
| Employee | Division | Suggestions | Rating |
|---|---|---|---|
| Give background color to the table cells to achieve seamless transition | |||
| Stephen C. Cox | Marketing | Make discount offers | 3/10 |
| Josephin Tan | Advertising | Give bonuses | 5/10 |
| Joyce Ming | Marketing | New designs | 8/10 |
| James A. Pentel | Marketing | Better Packaging | 8/10 |
Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
| Nation | Capital | Language | Unique |
|---|---|---|---|
| Japan | Tokyo | Japanese | Karate |
| South Korea | Seoul | Korean | Ginseng |
| China | Beijing | Mandarin | Kung-Fu |
| Indonesia | Jakarta | Indonesian | Batik |
- Important!
- Make sure the text stands out against the background
- Pros
- Easy to style, not too bland
- Cons
- Uses images, patterns and gradients might distract reading
- Play With
- Color scheme, patterns, typography, borders, backgrounds, gradients, icons
Final Words
I know I barely scratched the surface with this article, so grab the source and play around. Feel free to post your favourite table designs, especially if it’s something I missed out. Over to you.
About the author
R.Christie is studying information systems at college. He viciously juggles activities from college, web design, programming, church, to sport activities. You can say hello to him via e-mail.
Editor’s note
This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.


Sean (August 13th, 2008, 11:56 am)
One of the better guest articles. Tables still suck! :)
Allison (August 13th, 2008, 11:58 am)
another great post smashing!!! beautiful tables.
TJ Mapes (August 13th, 2008, 12:02 pm)
F*** tables
Steve (August 13th, 2008, 12:03 pm)
Tables…… I though tables were bad :) these look very nice though! Good read
Tanner Christensen (August 13th, 2008, 12:04 pm)
Tables? Seriously?
mikemike (August 13th, 2008, 12:07 pm)
Terrible. The Vertical Minimalist section displays improper use of tables for non-tabular data. The markup there should be headers followed by unordered lists. NOT TABLES!
Aaron (August 13th, 2008, 12:08 pm)
Praise ye table! :)
Ben Carlson (August 13th, 2008, 12:11 pm)
Tables for tabular data, who woulda thunk it..
Good article, some neat tricks, and very nice looking tables.
add (August 13th, 2008, 12:11 pm)
“F… tables”
you retards… Tables are GOOD when dealing with tabular data. pffff
Henry Hoffman (August 13th, 2008, 12:12 pm)
This is one of the most poorly written articles I’ve read so far. It doesn’t take any time to read through and fix typos and grammar. The content is quite good though.
@ TJ Mapes - Stop being such a purist. Tables are for use with tabular data, DIV’s are for layout.
MikeWhoBikes.com (August 13th, 2008, 12:13 pm)
Now here is a terrific guest article! Very useful and informative, with techniques that I can apply directly to what I’m working on.
A variation on #10, using a gradient background image, is to have the :hover change to a gradient that is vertically reversed. This creates a subtle 3D effect that looks great and really emphasizes that row.
eddie (August 13th, 2008, 12:19 pm)
You’re darn right about that! :-)
canute (August 13th, 2008, 12:21 pm)
dont know why they insult tables
i mean
web depends a lot of it years ago
that tool help us before get freaks about divs
besides, tables reminds me to net art
thanks!
keep posting
Gary (August 13th, 2008, 12:24 pm)
Overall, a nice simple article on tables. Author seems to have forgotten all about the table though.
add (August 13th, 2008, 12:26 pm)
you can fake tr:hover in IE6 with a little JS:
onmouseover=”this.className=’trhover’” onmouseout=”this.className=’trdefault’”
Gary (August 13th, 2008, 12:26 pm)
Ooops. I used HTML… thats a no-no. I meant to say “seems to have forgotten all about the table caption tag though”.
Ben (August 13th, 2008, 12:29 pm)
To the other commenters, this isn’t tabled layout, this is tables for tabular data - the true and semantically correct purpose of the HTML table.
Know the difference.
AK (August 13th, 2008, 12:38 pm)
Brilliant, learning more all the time!
juzek (August 13th, 2008, 12:39 pm)
CSS kids.. tables do not sucks. Tables are for “tables” - not for design. Great article.
Moritz Gießmann (August 13th, 2008, 12:39 pm)
I love this article! One of you said “tables suck”, but not in this way!
Chris (August 13th, 2008, 12:43 pm)
Tables for tabular data == good
Tables for layout == bad
Parroting “tables suck” betrays your lack of understanding of the semantic, not presentational, intent of the table tag. I would argue that, in the interest of a semantic web, using the table tag (and all of the other associated tags like tbody, table headers, the summary attribute, etc.) is better than a pure CSS table.
Abdulsalam Alasaadi (August 13th, 2008, 12:44 pm)
Great Post.. keep it up.
paul (August 13th, 2008, 12:51 pm)
I don’t like tables at all, but is something you must use sometimes, so the examples above are real useful, I Love you site, on of the best ones for Web Developers, Thank You!!!!
Jimmer (August 13th, 2008, 12:53 pm)
“Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells.”
A minor quibble:
Historically, a 1-pixel-wide (or high) background was not advisable as it caused memory and processor problems. (I distinctly remember watching some 1-pixel backgrounds take a minute or so to load!) While computers and browsers are better, I suspect it’s still advisable to make backgrounds more like 12 pixels (if you can) to lighten the browser’s load. And it doesn’t add a lot to bandwidth.
Max (August 13th, 2008, 12:55 pm)
One of the best guest articles so far.
Very informative and helpful!
Jason (August 13th, 2008, 12:56 pm)
Exactly. Using tables for data is the best thing. Using tables for layout is the worst thing.
This article is really useful, complete and well done ! More more more please !
Lukas (August 13th, 2008, 12:58 pm)
Great article!
I’m still using tables to represent data, and this is a good way to “refresh” my table design.
Really good job
Peter Mularien (August 13th, 2008, 1:03 pm)
Great article. Kudos to the guest author.
I would love to see a design-focused follow-on done in typical SM style providing a survey of the “n Best Table Designs” that highlights attractively designed tables. The Link [icant.co.uk] is the only design resource featuring tables that I’ve encountered so far.
mac_fun (August 13th, 2008, 1:11 pm)
Great one! Thanks!
kate (August 13th, 2008, 1:16 pm)
tables still give me a hard time. good post!
Andrew Miguelez (August 13th, 2008, 1:32 pm)
All of you people complaining about the use of tables are so pathetic. Try to pay attention here, this is important: tables are still necessary and very useful for presenting and organizing sets of data. That’s their purpose in the first place! However, table-based layouts are bad and hinder the use and benefits of CSS designing.
Did you get all of that? I hope so because this is a fantastic article! Props to the author. Definitely one of the best guest posts thus far. Thank you for sharing!
-Andrew
Cosmi (August 13th, 2008, 1:34 pm)
No no, table not sucks!
Don’t understand wrong the tables.
Tables is only for tabular data.
Anyway, great article, thanks Christie!
psiberia (August 13th, 2008, 1:36 pm)
Nice article, one of the better ones in recent days.
Grats! First time I have seen colgroup used. Still a shame “rowgroup” doesn’t exist, and still won’t from the spec on HTML 5. Would save coding a modulo to alternate classes…
Dimitry Wolotko (August 13th, 2008, 1:44 pm)
I’m logn try doit item number nine easy - and i’am find this - thanks!
Joep (August 13th, 2008, 1:45 pm)
Tables are not bad. They just need to be used for what they are invented for, ehh… tables. Use divs for the layout
Link [www.compubase.nl]
rerich (August 13th, 2008, 1:50 pm)
great !!!
jordan (August 13th, 2008, 1:54 pm)
I don’t understand these anti-tables remarks, yes they are useless for layout but still absolutely necessary for correctly displaying accessible tabular data. Bookmarking this, excellent examples.
JL (August 13th, 2008, 1:56 pm)
One of the better guest articles…
But I can’t give it 5 stars because there are no such things as “vertical tables,” they are merely columns of lists (which should use
ulorol).Thomas Dedericks (August 13th, 2008, 2:03 pm)
I totally stand by the principle. Using tables for layout in 2008 is bad.
But (unfortunately) tables for layout might still be the most efficient solution in some particular cases: same height columns with flexible widths, vertical alignment, etc. This is due to an incomplete support of CSS specifications by the most common browsers (not only IE6, for once).
My point is: sometimes, “tableless fanatism” just causes headaches. Not worth it ;)
Nice article, by the way :)
Jahdog (August 13th, 2008, 2:05 pm)
Great article.
sometimes Table is the best tool for job….they don’t suck just for being….unlike IE
Laura (August 13th, 2008, 2:08 pm)
Best guest article so far.
Nice to see one that isn’t just brief text done in 5 minutes, but with useful illustrative images and html/css.
Benni (August 13th, 2008, 2:11 pm)
Great article. I almost forgot how to use tables since I don´t use them anymore for design purposes.
Dan (August 13th, 2008, 2:12 pm)
SM should place the ads and other content on the right into a table and delete it…. I waste 2 seconds of my life every time I visit… and if I scroll before its done loading… ZOMG!
Stephan (August 13th, 2008, 2:24 pm)
Oldschool, cool!
But “table” in uppercase please!
Since clients needs stuff like “the whole row is a link but the column ‘taxes’ must be have a special handle” i use “position:block”ed built tables via , , , …. runs fine,is enough and more flexi.
Chris Murphy (August 13th, 2008, 2:25 pm)
Nice. Finally a sensible example on how to use tables for real-world applications.
Stephan (August 13th, 2008, 2:26 pm)
sorry , no ecaped tags in the end of text below.
Bob (August 13th, 2008, 2:35 pm)
CSS3 selectors render ‘class=”odd”‘ useless. Just use tr:nth-child(odd).
Firehed (August 13th, 2008, 2:39 pm)
If you need to build a decent email-based newsletter, you’re more than likely going to go with tables.
dirk zaal (August 13th, 2008, 3:16 pm)
Finally the taboo out in the open: we can not really without TABLE , nobody in the business dare to write about TABLE
excellent subject and story.
curious for your next subject!
Maverick (August 13th, 2008, 3:23 pm)
Nice article, good to show certain twits in these comments what tables are actually supposed to be used for.
Jaclyn (August 13th, 2008, 3:30 pm)
No one asked if the content in the tables was ‘table data’. The concept is to show how to display nice tables and have the code be correct.
Wonderful article. This is my winner until now!
Keith (August 13th, 2008, 3:45 pm)
Fantastic article!! Great job
martin (August 13th, 2008, 3:48 pm)
why anyone would want to win a macbook air is beyond me but anyways…
this article seems to be a more basic version of an article Link [veerle.duoh.com]
Rom (August 13th, 2008, 3:54 pm)
cool article, yeah tables really do eat a lot of time in designing them.
thanks for this smashing article! :)
Daniel (August 13th, 2008, 4:13 pm)
The people who are saying fuck tables are stupid.
No wonder this website doesn’t post code articles, apparently most of the readers are mentally disabled
Tables are NOT a deprecated tag. They are perfectly fine for displaying tabular data, just not for layouts. I can’t believe I’m reading comments like that
Hector Rojas (August 13th, 2008, 4:38 pm)
Tables got to be
are you serious? Any article starting with such horrendous grammar is a no-no in my book.
I guess they don’t teach or require you to read and write correctly in College anymore…
AvantisOne (August 13th, 2008, 4:45 pm)
Dude, No one uses tables. Try some CSS, my friend.
Matthew (August 13th, 2008, 4:46 pm)
One of the better posts, I really like this. CSS tips ftw. :)
h-a-r-v (August 13th, 2008, 4:59 pm)
Simply pro. My second highest rate.
Karan (August 13th, 2008, 5:10 pm)
Really informative….till now i thought table is of no use for designing. This article has made be believe that tables can be made to look beautiful. Nice article
Smashing Magazine rocks as always!!
Ben (August 13th, 2008, 5:15 pm)
Looking at all the “F** tables”, “OMG tables u serious”, “Tables are bad, mmkkay” comments I wonder if any of these posters have actually understood what tables are meant to be used for. They’re meant for *cue drumroll* tabular data, which is exactly what this article shows. No one said they have to look butt ugly doing so.
Stop screaming “tables are bad” just because you “heard” or “read it somewhere”. The element exists for a reason and a very good one at that. Any Web-standards or CSS book will tell you that, read them.
Ben (August 13th, 2008, 5:18 pm)
@AvantisOne - Have you actually READ the article, let alone understood the TABLE element and it’s intended use. On top of that what do you think this article uses to style the tables.
Think for a second before you hit the comment button next time.
Christian (August 13th, 2008, 5:21 pm)
Great article, beautiful tables. Thanks!
Mila Jones (August 13th, 2008, 5:23 pm)
Great article!
I’d like to see an example of how the ‘table-haters’ manage their tabular data. Ignoring a completely valid method of organizing data for the sake of argument screams noob to me. Did I mention properly formatted tables are consistent in all browsers?
Tables are for tabular data, divs are for layouts.
As for grammar… give me a break… you shouldn’t dismiss a great article because of a few grammar mistakes. The author spent a lot of time crafting a great post to share their knowledge with the community, and everyone is so quick to criticize. Where’s your article?
I smell a little jealousy….
Anyway, keep up the great work!
Mariella (August 13th, 2008, 5:24 pm)
Excellent guest article. Thanks.
jayhan (August 13th, 2008, 6:07 pm)
Learnt something here, thanks for the great post
nano (August 13th, 2008, 6:56 pm)
hello
Donna (August 13th, 2008, 7:24 pm)
I enjoyed this article and learned some new techniques. I get quite bored quickly with tables and unfortunately I have a lot of them to style for tons of monotonous data. So this was inspirational and I can’t wait for the next one on this topic.
Violeta (August 13th, 2008, 7:52 pm)
Absolutely great! ñ_ñ
shakes (August 13th, 2008, 7:56 pm)
great article…i like the new technical development slant these days…
abdullah alaydrus (August 13th, 2008, 7:56 pm)
nice article when work with a lot data area, but not to usefull when working with design.
and it’s better guest author articles
Carl Youngblood (August 13th, 2008, 8:27 pm)
There is one major problem in many of these examples. Numbers should almost always be right-aligned, so that people can quickly and easily see the relative magnitude of a number compared to the others in the chart. This is the way spreadsheets and ledgers do it, for good reason.
Jeremy Brown (August 13th, 2008, 8:40 pm)
I’d much rather apply zebra rows using protype or another AJAX function than have to wrtie a class on every second row.
Plus you get the benefit of sorting large tables of data without having to reload the page.
Link [www.frequency-decoder.com] have a couple of great table examples but the one I use is
Link [www.frequency-decoder.com]
Mithun Sreedharan (August 13th, 2008, 8:52 pm)
Great words! Beautifully written!
adapter (August 13th, 2008, 9:23 pm)
nice article…very very useful for tabular data.
NissenPaaHaaugen (August 13th, 2008, 9:24 pm)
Why does 90% of these table designs remind me of Office 2007 Word’s new styles?
Natrium (August 13th, 2008, 9:36 pm)
This article is great! This is what I expect from Smashing Magazine!
cemagraphics (August 13th, 2008, 9:48 pm)
very good article, thanks ;)
Rom (August 13th, 2008, 9:53 pm)
Table examples presented here are for data only. So for those zealous web standards people, it will never hurt usability for presenting data. Just don’t use them for layouting, such an eyesore for those who were obsessive looking at your source page. Less is more! :)
Murtuza (August 13th, 2008, 9:54 pm)
Great article….
I like this article !…post some more article on Table.
Thanks Christie
gaurav_m (August 13th, 2008, 9:57 pm)
nice tables :)
rajaraman (August 13th, 2008, 10:01 pm)
beautiful tables,
Ruan (August 13th, 2008, 10:34 pm)
The only time I’ll ever use tables is for this purpose! :)
Good post
Saeed Al-zahrani (August 13th, 2008, 10:39 pm)
@ Jimmer
You are absolutely right , we should consider the performance while working on tables.
It also advisable to style rows rather than cells specially if you are going to use image as a background.
(this is one of the best articles)
Curt Simon Harlinghausen (August 13th, 2008, 10:44 pm)
I like this article. Great job.
fredjaillet (August 13th, 2008, 11:17 pm)
See a jquery plugin for a tablesorter and zebra…
Link [tablesorter.com]
V1 (August 13th, 2008, 11:53 pm)
tables suck…
no matter how u style them, enjoy your fail whale.
Angela (August 14th, 2008, 12:00 am)
Not a bad article but way over the contest’s character limits. I think some of the other entries could have been better had they been allowed the character count that this entry used.
Dresah (August 14th, 2008, 12:04 am)
Excellent work.
Quoo (August 14th, 2008, 12:05 am)
Le table de err… victory or something … like that.
Do you noobs never have tabular data to display? Tables don’t suck, they should just be used for what they were intended.
Great article, tyvm.
Carlton Dickson (August 14th, 2008, 12:09 am)
The first few comments in this article about tables sucking upset me, when displaying rows and rows of data tables are semantically the correct way to go.
Excellent article with some great table designs, will definitely come in handy in the future!
Julien (August 14th, 2008, 12:09 am)
Great article !
I just can’t understand why to advocate CSS hacks in the 9th solution. In this case, CSS conditional comments would have been the best solution instead of this uggly
* html table tbody tdPez (August 14th, 2008, 12:24 am)
@ All the ‘tables fail’ crew (who also seem to be the ones with the poorest grammar and spelling and the lowest comprehension skills) - have you ever put a blind person with a screenreader in front of a css based table? The screenreader will read the first row, then the second row, then the third row, and so on. Only with (properly marked-up) tables can you properly define the relationship between table headers and content. Read this before getting on your ill-informed high horses:
Link [www.webaim.org]
Adam Alyan (August 14th, 2008, 12:31 am)
Best guest article yet!
I can’t understand the comments about how bad tables are! Tables had a useful use, the writer didn’t say use tables for page structure.
Tables are good as tables!!!
Mike (August 14th, 2008, 12:43 am)
Great article Smashing as always, but why does everyone have so much resentment for tables? Have they done something wrong?
Just because we’ve all learnt div positioning that means we can say they ’suck’? They don’t, when used in an appropriate context. Also, it is still the only way to create any level of layout within an e-mail.
So just think…before you go writing off all those little tags you saw when Saving for Web and didn’t know what they meant ;)
Jeremy (August 14th, 2008, 12:57 am)
Tables do not “suck” when used for what they are supposed to be used for - tabular data. Tables suck when used for layout and slicing - and that is the main reason people dislike tables.
Vitaly Friedman & Sven Lennartz (August 14th, 2008, 12:57 am)
@all: tables are good. If you use them for the right purpose and in the right context — to present tabular data.
zhille (August 14th, 2008, 12:58 am)
Great guest article :)
It’s funny how some people try to seem intelligent by flaming tables :) very hilarious :)
For big websites with a lot of tabular data, and row/column data, tables are still the only sane way to code. But you only need to code that particular data, not the entire website. BUUUT again, we use CSS not table attributes to style it. Maybe we’ll just need cellpadding, os some small attribute, but that doesn’t mean we’re bad because “tables are history”. Tat means fewer CSS glitches and stuff, we all know and love IE6 :) Those people who flame the author probably never worked on a e.g PHP/MySQL financial website with admin pages and a looot of tabular data…be a little more serious, guys.
So tables are not history, and they do not suck IF USED PROPERLY. Be a little more intelligent, don’t just flame :) Sorry for the long comment
jerry (August 14th, 2008, 1:12 am)
very good stuff, it’s main:Link [www.symonsconecrusher.net]
bruno byington (August 14th, 2008, 1:23 am)
Nice Article. Loved it.
Tables still fu***** suck major. I guess I dont like them because I grew up without them and because you can in my graphic design apartment only find chairs. No tables. But sure if your using ‘em for tabular things, then your doing something right. Its jsut so awckward when your actually styling tables or writing it in the XHTML Markup because you know you can only use them for tabular but have seen people eat from the forbidden fruit to layout things with it. Right? Well with me this is always the reason why Im so disgusted by this fruit ;)
LC (August 14th, 2008, 1:27 am)
I can’t wait to see an article here without a comment stating that this is “the worst article ever wrote on this site” or “the most poorly written article so far”.
I thought we French were the only one to complain all the time, look like web designers all have a “French touch” after all ;)
Anyway, great article. I like the rounded corner table, but then you have to specify a fixed width. I didn’t know the tr:hover, great tip.
Dizet (August 14th, 2008, 2:09 am)
Pete (August 14th, 2008, 2:13 am)
hey tables were never meant for layout. they were designed for appropriate tabular data and they just became popular for layout before web standards and css.
i’ll find this article very useful some day, thanks
Nia (August 14th, 2008, 3:50 am)
NIA!
PY (August 14th, 2008, 3:52 am)
Fuck tables.
Pixelbaron (August 14th, 2008, 4:03 am)