Smashing Magazine ~ we smash you with the information that will make your life easier. really.
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

Advertisement

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!

Top 10 CSS Table Designs

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:

  1. Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
  2. 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.
  3. 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:hover rules don’t work in IE 6, table can be confusing if it has too many columns
Play with
Color scheme, typography, tr:hover effects

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:hover effect
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 dashed or dotted to 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 colgroup elements
Play With
Contrasting color, borders, colgroup and col, 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
Google 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:hover effect does not work in IE, suitable for certain types of tables only
Play with
Color scheme, typography, icons and tr:hover effects

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
Google 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
Google 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:hover effects

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
Google 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:hover effects, 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.

Delicious button Stumbleupon

Advertisement
  1. 1.

    Sean (August 13th, 2008, 11:56 am)

    One of the better guest articles. Tables still suck! :)

  2. 2.

    Allison (August 13th, 2008, 11:58 am)

    another great post smashing!!! beautiful tables.

  3. 3.

    TJ Mapes (August 13th, 2008, 12:02 pm)

    F*** tables

  4. 4.

    Steve (August 13th, 2008, 12:03 pm)

    Tables…… I though tables were bad :) these look very nice though! Good read

  5. 5.

    Tanner Christensen (August 13th, 2008, 12:04 pm)

    Tables? Seriously?

  6. 6.

    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!

  7. 7.

    Aaron (August 13th, 2008, 12:08 pm)

    Praise ye table! :)

  8. 8.

    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.

  9. 9.

    add (August 13th, 2008, 12:11 pm)

    “F… tables”

    you retards… Tables are GOOD when dealing with tabular data. pffff

  10. 10.

    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.

  11. 11.

    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.

  12. 12.

    eddie (August 13th, 2008, 12:19 pm)

    You’re darn right about that! :-)

  13. 13.

    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

  14. 14.

    Gary (August 13th, 2008, 12:24 pm)

    Overall, a nice simple article on tables. Author seems to have forgotten all about the table though.

  15. 15.

    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’”

  16. 16.

    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”.

  17. 17.

    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.

  18. 18.

    AK (August 13th, 2008, 12:38 pm)

    Brilliant, learning more all the time!

  19. 19.

    juzek (August 13th, 2008, 12:39 pm)

    CSS kids.. tables do not sucks. Tables are for “tables” - not for design. Great article.

  20. 20.

    Moritz Gießmann (August 13th, 2008, 12:39 pm)

    I love this article! One of you said “tables suck”, but not in this way!

  21. 21.

    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.

  22. 22.

    Abdulsalam Alasaadi (August 13th, 2008, 12:44 pm)

    Great Post.. keep it up.

  23. 23.

    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!!!!

  24. 24.

    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.

  25. 25.

    Max (August 13th, 2008, 12:55 pm)

    One of the best guest articles so far.
    Very informative and helpful!

  26. 26.

    Jason (August 13th, 2008, 12:56 pm)

    Tables for tabular data == good
    Tables for layout == bad

    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 !

  27. 27.

    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

  28. 28.

    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.

  29. 29.

    mac_fun (August 13th, 2008, 1:11 pm)

    Great one! Thanks!

  30. 30.

    kate (August 13th, 2008, 1:16 pm)

    tables still give me a hard time. good post!

  31. 31.

    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

  32. 32.

    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!

  33. 33.

    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…

  34. 34.

    Dimitry Wolotko (August 13th, 2008, 1:44 pm)

    I’m logn try doit item number nine easy - and i’am find this - thanks!

  35. 35.

    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]

  36. 36.

    rerich (August 13th, 2008, 1:50 pm)

    great !!!

  37. 37.

    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.

  38. 38.

    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 ul or ol).

  39. 39.

    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 :)

  40. 40.

    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

  41. 41.

    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.

  42. 42.

    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.

  43. 43.

    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!

  44. 44.

    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.

  45. 45.

    Chris Murphy (August 13th, 2008, 2:25 pm)

    Nice. Finally a sensible example on how to use tables for real-world applications.

  46. 46.

    Stephan (August 13th, 2008, 2:26 pm)

    sorry , no ecaped tags in the end of text below.

  47. 47.

    Bob (August 13th, 2008, 2:35 pm)

    CSS3 selectors render ‘class=”odd”‘ useless. Just use tr:nth-child(odd).

  48. 48.

    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.

  49. 49.

    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!

  50. 50.

    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.

  51. 51.

    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!

  52. 52.

    Keith (August 13th, 2008, 3:45 pm)

    Fantastic article!! Great job

  53. 53.

    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]

  54. 54.

    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! :)

  55. 55.

    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

  56. 56.

    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…

  57. 57.

    AvantisOne (August 13th, 2008, 4:45 pm)

    Dude, No one uses tables. Try some CSS, my friend.

  58. 58.

    Matthew (August 13th, 2008, 4:46 pm)

    One of the better posts, I really like this. CSS tips ftw. :)

  59. 59.

    h-a-r-v (August 13th, 2008, 4:59 pm)

    Simply pro. My second highest rate.

  60. 60.

    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!!

  61. 61.

    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.

  62. 62.

    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.

  63. 63.

    Christian (August 13th, 2008, 5:21 pm)

    Great article, beautiful tables. Thanks!

  64. 64.

    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!

  65. 65.

    Mariella (August 13th, 2008, 5:24 pm)

    Excellent guest article. Thanks.

  66. 66.

    jayhan (August 13th, 2008, 6:07 pm)

    Learnt something here, thanks for the great post

  67. 67.

    nano (August 13th, 2008, 6:56 pm)

    hello

  68. 68.

    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.

  69. 69.

    Violeta (August 13th, 2008, 7:52 pm)

    Absolutely great! ñ_ñ

  70. 70.

    shakes (August 13th, 2008, 7:56 pm)

    great article…i like the new technical development slant these days…

  71. 71.

    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

  72. 72.

    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.

  73. 73.

    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]

  74. 74.

    Mithun Sreedharan (August 13th, 2008, 8:52 pm)

    Great words! Beautifully written!

  75. 75.

    adapter (August 13th, 2008, 9:23 pm)

    nice article…very very useful for tabular data.

  76. 76.

    NissenPaaHaaugen (August 13th, 2008, 9:24 pm)

    Why does 90% of these table designs remind me of Office 2007 Word’s new styles?

  77. 77.

    Natrium (August 13th, 2008, 9:36 pm)

    This article is great! This is what I expect from Smashing Magazine!

  78. 78.

    cemagraphics (August 13th, 2008, 9:48 pm)

    very good article, thanks ;)

  79. 79.

    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! :)

  80. 80.

    Murtuza (August 13th, 2008, 9:54 pm)

    Great article….

    I like this article !…post some more article on Table.

    Thanks Christie

  81. 81.

    gaurav_m (August 13th, 2008, 9:57 pm)

    nice tables :)

  82. 82.

    rajaraman (August 13th, 2008, 10:01 pm)

    beautiful tables,

  83. 83.

    Ruan (August 13th, 2008, 10:34 pm)

    The only time I’ll ever use tables is for this purpose! :)
    Good post

  84. 84.

    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)

  85. 85.

    Curt Simon Harlinghausen (August 13th, 2008, 10:44 pm)

    I like this article. Great job.

  86. 86.

    fredjaillet (August 13th, 2008, 11:17 pm)

    See a jquery plugin for a tablesorter and zebra…

    Link [tablesorter.com]

  87. 87.

    V1 (August 13th, 2008, 11:53 pm)

    tables suck…

    no matter how u style them, enjoy your fail whale.

  88. 88.

    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.

  89. 89.

    Dresah (August 14th, 2008, 12:04 am)

    Excellent work.

  90. 90.

    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.

  91. 91.

    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!

  92. 92.

    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 td

  93. 93.

    Pez (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]

  94. 94.

    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!!!

  95. 95.

    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 ;)

  96. 96.

    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.

  97. 97.

    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.

  98. 98.

    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

  99. 99.

    jerry (August 14th, 2008, 1:12 am)

    very good stuff, it’s main:Link [www.symonsconecrusher.net]

  100. 100.

    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 ;)

  101. 101.

    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.

  102. 102.

    Dizet (August 14th, 2008, 2:09 am)

    I almost stopped reading after the first line! “Tables have got to be…” perhaps? How about adding a the to the start of “amount of detail” though I have no idea what “we have to look over to” means.

    Extra marks added for the use of the ‘Oxford Comma’.

  103. 103.

    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

  104. 104.

    Nia (August 14th, 2008, 3:50 am)

    NIA!

  105. 105.

    PY (August 14th, 2008, 3:52 am)

    Fuck tables.

  106. 106.

    Pixelbaron (August 14th, 2008, 4:03 am)