Smashing Magazine we smash you with the information that will make your life easier. really.

Top 10 CSS Table Designs

By Smashing Editorial, August 13th, 2008 in CSS, Events | 354 Comments | Forum

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:

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

Published in CSS, Events, August 13th, 2008
Tags: coding, CSS, tables

1.

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

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

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

another great post smashing!!! beautiful tables.
3.

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

F*** tables
4.

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

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

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

Tables? Seriously?
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.

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

Praise ye table! :)
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.

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

“F… tables”

you retards… Tables are GOOD when dealing with tabular data. pffff
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.

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.

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

You’re darn right about that! :-)
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.

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.

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.

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.

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.

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

Brilliant, learning more all the time!
19.

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

CSS kids.. tables do not sucks. Tables are for “tables” - not for design. Great article.
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.

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.

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

Great Post.. keep it up.
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.

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.

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

One of the best guest articles so far.
Very informative and helpful!
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.

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.

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.

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

Great one! Thanks!
30.

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

tables still give me a hard time. good post!
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.

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.

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.

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

I’m logn try doit item number nine easy - and i’am find this - thanks!
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
36.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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

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

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

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

CSS3 selectors render ‘class=”odd”‘ useless. Just use tr:nth-child(odd).
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.

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.

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.

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.

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

Fantastic article!! Great job
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.

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.

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.

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.

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

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

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

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

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

Simply pro. My second highest rate.
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.

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.

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.

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

Great article, beautiful tables. Thanks!
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.

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

Excellent guest article. Thanks.
66.

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

Learnt something here, thanks for the great post
67.

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

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

Absolutely great! ñ_ñ
69.

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

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

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

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

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]
73.

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

Great words! Beautifully written!
74.

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

nice article…very very useful for tabular data.
75.

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

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

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

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

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

very good article, thanks ;)
78.

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

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

Great article….

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

Thanks Christie
80.

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

nice tables :)
81.

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

beautiful tables,
82.

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

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

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

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

I like this article. Great job.
85.

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

See a jquery plugin for a tablesorter and zebra…

Link [tablesorter.com]
86.

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

tables suck…

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

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

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

Excellent work.
89.

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

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

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

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]
93.

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

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

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

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

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

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

very good stuff
99.

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

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

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’.
102.

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

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

God, this ready like a YouTube comments thread. I did not know there are so many gradeschool webdesigners out there ;)

@LC nope, that is us Germans that always complain ;)
104.

Chris (August 14th, 2008, 4:17 am)

A good article on how tables should be used. Tables seem to leave a bad taste in a lot of peoples mouths, particularly standards designers who use CSS and XHTML. However, the table is a good tool at presenting data, if used properly with thead tags, screen readers and search engine spiders as well as the average website user should have no problem in using them.

Tables are bad when designing whole websites with them. Tables presenting data are a good thing.
105.

Phill Pafford (August 14th, 2008, 4:29 am)

Nice article,

Have you ever seen Link [cssglobe.com] ? its a very clean plug-in for a well formatted table.

Also for web-designers who do not like tables and prefer CSS, I would agree for element positioning CSS is the only was but for tablature data such as an excel spreed sheet tables are great do display the data.

–Phill
106.

Henry Hoffman (August 14th, 2008, 4:46 am)

What happens if you have a tabular layout?
107.

davez0r (August 14th, 2008, 4:48 am)

Best guest article yet. Something I can actually use!
108.

Ignacio (August 14th, 2008, 4:56 am)

When you need a table, use tables! Why not!
109.

Thibaut (August 14th, 2008, 5:02 am)

The article was quite good and the first comments quite funny, I had a great time reading it.

PS : thanks to the morons, btw, how could we sometime laugh if they didn’t exist ;-)
110.

flasheadito (August 14th, 2008, 5:07 am)

Thnks a lot
nice article
111.

Ham (August 14th, 2008, 5:16 am)

I second that. Thanks for helping define the proper use of Tables.

Yes, Tables suck but when used properly they can be very useful.
112.

Mikey (August 14th, 2008, 5:34 am)

Guys, tables are fine for tabular data. In fact using tables when presenting tabular data is the correct way to do it. If your doing it with a fistful of custom classes and ID’s then you’re doing it wrong.

Tables are only bad when used for design layout. Some people still do it and it blows me away how ignorant they are. But this article is showing us some nice ways to present tabular data.

Kudos to the author.
113.

psd2markup (August 14th, 2008, 5:35 am)

Guys, shut up if u don’t know. If you use divs and spans with tons of styling for tabular data, you are nothing but plain snobs.

Tables are good, when dealing with tabular data. They validate, and they can look very good.
114.

ScreenOrigami (August 14th, 2008, 5:51 am)

It’s funny how some people try to seem intelligent by flaming tables :) very hilarious :)

(zhille et al)

@ all standardistas out there: lean back an rejoice in the thought that those who flame data tables today will most likely have seen the light a year from now, and their flames in this thread will haunt them like zombies in egosurfing hell. :P
115.

Jackson Hyde (August 14th, 2008, 6:06 am)

@AvantisOne

Dude, you’re a moron. Learn to read.

PS. Regarding the Horizontal Zebra style, CSS3 supports ‘Structural Pseudo-Classes’ to achieve what a class of ‘odd’ would achieve:

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

Link [www.w3.org]
116.

Jackson Hyde (August 14th, 2008, 6:09 am)

@ Henry Hoffman

Your code won’t validate, it won’t be accessable or scalable and it’ll be very hard to maintain.

Learn to layout your markup using standards compliant ‘cascading style sheets’ (CSS) and you’ll wonder why you ever touched tables (for layout that is).
117.

math (August 14th, 2008, 6:29 am)

C’mon! Some people do not understand the requierness for table. If you have table data then use tables - its semantic! So stop to “Tables are dead” and so on - form follows function.

This is a great article. And it could be rewritten to the “Swiss Army Knife for Tabledesign” ;)
Thanks s lot!

Math
118.

Chris (August 14th, 2008, 6:37 am)

Tables are terrible but you sure know how to make them look good. Thanks for the article.
119.

dotNetChris (August 14th, 2008, 6:43 am)

I agree whole heartedly, while it’s nice to see some usage of CSS styling tables properly we don’t need to encourage anyone on the internet to use tables again instead of div’s, p’s and ul’s.
120.

Paul (August 14th, 2008, 6:48 am)

This is a very interesting article. Although rarely used in design, tables are very useful for data, and must sometimes be used. Very good
121.

Sean Johnson (August 14th, 2008, 6:57 am)

Excellent article. Tables are necessary cornerstone in web design. Not all web sites are blogs or brochures, some are actual web applications that require listing out data, especially in the corporate intranet world where functionality takes a back seat to design OR standards.
122.

Daniel G. Blázquez (August 14th, 2008, 7:30 am)

Revise #2 “Vertical Minimalist” in Opera .. :-)
123.

Davin (August 14th, 2008, 8:00 am)

Tables suck for layout. Tables are the best thing for tabular data :D. Thanks!
124.

KangarooDeziner (August 14th, 2008, 8:07 am)

Great article. I browse the comments and see people saying bad things about tables. Tables aren’t bad. They just have a use. Tabular data. They aren’t meant for the presentation of an entire website. So use tables for tabular data, people.

There are 2 things I think you missed out on here, and they’re both CSS3 specific. These two tricks are obviously not supported by older browsers right now, but I think they’re worth mentioning for future developments.

The first is the psuedo class “nth-child”. You can achieve the zebra striping effect for the horizontal data without adding extra classes this way. You simply use “tr:nth-child(odd)” and apply your styles in your CSS. That simple.

The next deals with rounded corners. In CSS3, it is possible to assign multiple images to the background of an element. The CSS gets a little heavy, but it works. Here’s how it might look…

table { background-image: url("top_left.jpg"), url("top_right.jpg"), url("bottom_left.jpg"), url("bottom_right.jpg"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; }

You just need to remember that the no-repeats and the positions are in the same order as you declare the background images. Like I said, makes the CSS a little heavy, but at least it’s all taken care of in one tag and you’re no longer creating useless div wrapper markup for the 4 different corners.

Again, most of this won’t be widely accepted right now, being new CSS, but I think it’s important to let people know what will be coming with the advancements of CSS and next-generation browsers.
125.

Tim (August 14th, 2008, 9:01 am)

What?!?! what about this one: Link [www.csskarma.com]
126.

jordan (August 14th, 2008, 10:14 am)

@Jackson Hyde

Yes it will.
127.

Smarmy (August 14th, 2008, 11:12 am)

You didn’t know that professional web developers still use tables for tabular data? Seriously?
128.

Mike (August 14th, 2008, 11:17 am)

Great article, I’m a sucker for statistics so I find I use tables quite a lot, I actually quite like them, just as long as they’re used appropriately.

Does this mean all the people saying ‘tables suck’ etc, are trying to display tabular data using divs and lists?? *snigger* that must be a nightmare, and look great with CSS disabled… Way to completely miss the point!
129.

Ryan (August 14th, 2008, 11:40 am)

These 130+ comments are precisely why I disable comments on my blog. What a bunch of idiots.

A great article being ruined by dozens of idiots RABBLE-RABBLEing about tables because they heard on a script-kiddy forum that you should never use tables. Gimme a break.
130.

Joseph (August 14th, 2008, 12:04 pm)

Are some of you serious.
The examples are of tabular data and that is what tables are meant for. I know you’ve all heard it time and time again “Tables are bad” and yes they are bad for designing your hole site in tables but as far as displaying actual tabular data, bravo!!! these are the best looking ones around. Thanks!!!
131.

Zarathustra (August 14th, 2008, 12:09 pm)

Incredible comments demonstrating a total misunderstanding of the use of tables to display data. No doubt from 14 year old professional web designers ;)
132.

Jose Sandoval (August 14th, 2008, 12:19 pm)

Great post! And great looking tables!
133.

Patricia (August 14th, 2008, 12:37 pm)

Beautiful! I am always looking to improve on tables’ designs for my own website and my customers’ These are a godsend, thanks for sharing!
134.

jacksonhyde (August 14th, 2008, 2:24 pm)

@jordan

well I guess you could get table layout to validate, but why the hell would you want to? I only code in XHTML Strict and getting a table to validate in Strict would add hours to my workload.

There is no possible way you can convince me that table-layouts are superior to semantic standards compliant CSS layouts.

SEO is better with CSS layouts, page weight is lower, development is quicker and more logical and maintenance/ammends are easier.
135.

Fred (August 14th, 2008, 2:32 pm)

Tables do not “suck”. They are really useful. They may “suck” for when you are doing a layout, but for tabular data they are perfect.
136.

Fred (August 14th, 2008, 2:34 pm)

Erm sorry for my post above. I just read the first 20 posts that slammed tables and scrolled down to tell the kids what for. But it seems like some of you have already posted a far more robust defence of tables later down the page.
137.

Scott (August 14th, 2008, 3:44 pm)

I’m confused, what’s all this people are saying about “pure CSS” tables? Why would you even consider using divs instead of tables? Incidentally, “pure CSS” is a horrible phrase. No web page can be pure CSS, you need HTML! ;)

For those unsure of the various table tags used here (and the several other possibles), there is a Link [www.doheth.co.uk].
138.

Scott (August 14th, 2008, 3:50 pm)

Oops, meant to say “there is a tutorial here”.

@jacksonhyde: table layouts can validate with absolutely no problems. Just don’t use deprecated or made-up attributes (e.g. “background” attribute doesn’t exist) and of course use CSS to set widths, etc. Obviously this is still not semantic and divs are better for layout, but it proves the point.
139.

Rob (August 14th, 2008, 5:12 pm)

Tables work … it’s CSS that sucks!

When I can create a grid layout using CSS that works in all modern browsers, doesn’t require weird non-semantic markup and strange CSS hacks … then and only then will I stop using tables for my layout.

I’m not an anti-semantic, just a pragmatist.
140.

Thomas (August 14th, 2008, 6:41 pm)

Very usefull. Just had to use a table myself, so good to get some examples to follow.
141.

Yudi (August 14th, 2008, 7:47 pm)

Thank u very much… very useful for my website…
142.

emp (August 14th, 2008, 11:24 pm)

Very nice.

I disagree with using backgrounds in tables, but the minimalist designs are very, very nice.
Thank you.

::emp::
143.

casper (August 14th, 2008, 11:59 pm)

great article. used the Horizontal Zebra for one of my projects.
give him the MB Air allready!!
144.

jordan (August 15th, 2008, 12:02 am)

@jacksonhyde

I believe I wasn’t talking about tables for layout, I was talking about creating valid tables for displaying tabular data. Which was also the point Henry Hoffman was making. I myself haven’t used tables for layout purposes for years, but I have had clients which require a form of displaying tabular information on a CSS layout and screenreaders cope with tables a lot better.
145.

Toni Trivković (August 15th, 2008, 12:51 am)

Very nice and useful article. Thanks on the source code ! ;)
146.

Craig Farrall (August 15th, 2008, 12:57 am)

I thought I knew loads about tables, not that I use them often, but alot of this here is very informative and useful, and could well come in handy.
147.

Stefan (August 15th, 2008, 1:38 am)

Bei mir klappt der RollOver nicht mit IE6. Gibt’s da einen Workaround? Danke und vielen Dank auch für den Artikel! :o)
148.

dogday (August 15th, 2008, 2:46 am)

Are you sure the last table is a Top one?
149.

Arnar (August 15th, 2008, 5:57 am)

It’s not that tables suck, it’s inproper use of tables that sucks.
150.

Manuel (August 15th, 2008, 6:48 am)

Nice article!
151.

Rafael de Paula (August 15th, 2008, 7:13 am)

Very cool! But, not working to IE6. There is a way of that works without having to use JavaScript?
152.

FortyPoundHead (August 15th, 2008, 10:56 am)

Thank you, Ben! Tables do have their use in the display of tabular data.

“Professional” web designers have made such a racket about not using tables for layout, and all the noobs can hear is “No tables! No tables!” Take it easy, noobs. Tables work fine. Just don’t use them to build your whole site layout!
153.

Aida (August 15th, 2008, 12:04 pm)

As someone who read a few books on html and css just out of the desire to learn something new, it’s hilariously funny to me that people who are supposed to be “professional” designers have no grasp what tables are used for.

I’m a teacher, and if I wanted to make a web page to present students’ grades I would use a table with their names and grades, not unordered lists.

Tables have their place in web design, they just need to be used for their intended purpose. I can’t believe a n00b like me knows this, and these guys don’t!

This is by far the best topic so far and it gets my vote. Some of these tables were really quite lovely, and the author presented a difficult topic in an understandable way.
154.

mshalabi (August 15th, 2008, 11:32 pm)

tabular data must be shown in tables.. not tableless…
155.

Sander D. (August 16th, 2008, 4:56 am)

I think this entry stretches the rules of the contest even further. A really nice article nonetheless, but 1200 characters of the discussion articles can’t start to compete with an extensive article as this one. It says “10 list items with a brief description (usually 1-2 sentences)” in the contest description/rules …
156.

Dr John (August 16th, 2008, 1:28 pm)

Excellent examples of how to style tables. What a pity some idiots do not realise that the semantically correct way to present tables of data is in a table!
157.

mike (August 16th, 2008, 5:37 pm)

I agree with i don’t remember who : there are bad examples, the ones whith movies datas whish should be coded using unordered lists.

Also, i think some experiments with a few JQuery plugins for gradients and rounded corners would have be cool, giving a taste of what will be possible when CSS3 will be well rendered by all the major browsers.

Anyway, it’s a very good article.
158.

Kate (August 17th, 2008, 12:13 pm)

AMAZING! Simply amazing!!! These tables just blew my mind and are very useful on top of that! More of this good stuff! :D
159.

R.Christie (August 17th, 2008, 6:18 pm)

Wow, thanks for all the feedbacks and critiques! I have been away until now so I wasn’t able to keep up with the comments, but I guess it’s better late than never.

First, I apologize for the bad grammar. I am not a native speaker
of English - I usually have no problems discerning English in my class, but I am now considering taking courses in writing -
and buying a word processor with a decent spell checker. I WILL have my future articles proofread by an expert by the way.

Link []
Thanks for that little JS trick. Fixes tr:hover in IE6 completely. Using Link [dean.edwards.name] is also advisable, and we don’t need to worry about people turning off Javascript in IE. Turning off JS in IE is a little complex, usually only the tech-savvy users can do this - and I think the majority (if not all) tech savvy windows users uses a more advanced browser.

Link [] and Link []
Are you asking for a workaround for IE6 tr:hover? See above.

Link []
I understand it’s ugly, and it invalidates your CSS ;p. But the selector points only to IE6 and below, which is the primary target because IE7 gets transprent PNGs allright. I always use conditional comments in
my work - which points to all versions of IE, I later apply the hack inside my IE-only-stylesheet. But of course it’s a matter of preference.

Link []
Didn’t think of it that way, I have not tested my designs on various computers, so I never knew that using 1px backgrounds is prone to hardware problems. Thanks for sharing! Somebody please
add editorial notes on the article…

Link [] and Link [] and Link []
Again, thank you for sharing your tricks. I hope CSS3 gets implemented quicker though. Advanced selectors and multiple background images are what all web developers been dying for.

Link []
Yes, you are absolutely correct. Thanks for fixing.

Link []
That’s why we’re all waiting for CSS3!

Link [] and Link [] and Link []
It’s a good point, and I might be wrong here, but I think when you are displaying a group of data that are meant to be comparable with one another - where each columns are separate entities but also meant to be read in relation to one another, the better way to do it is by tables. Maybe it’s a matter of preference, but IMO it would be very hard to try to style the above movie tables using just unordered lists because each column is not meant to be separate with one another as lists. They all need to be contained in a single container.
Again, I might be going to the wrong direction - but if it’s about semantics, the columns (or lists - if you prefer to call it that way) unite to represent one topic (movies I rated) - they are meant to be read together. Would it be easier to discern the data if they were styled in lists?
160.

Anthony (August 17th, 2008, 6:58 pm)

Yes, Tables. Tables are still the best mark-up for tabular data such as invoices or tariffs or price comparisons.
161.

Jackson Hyde (August 17th, 2008, 11:27 pm)

@jordan

ah, a misunderstanding then. I’m all for using tables in the right context, just not for layout. I guess I was preaching to the converted. :)
162.

Amphelice Brook (August 18th, 2008, 3:07 am)

It’s funny how many comments attack the idea of using tables for any purpose whatsoever, even if it’s for the supposedly approved usage of presenting “tabular data”. What does that even mean, anyway? Isn’t it all data? And if it’s in a table, doesn’t that make it tabular? How is a table not about layout? Why is “table” a dirty word but “grid” the next big thing? Before you bite my head off, let me just say that I use and enjoy YUI grids. I’m just beyond tired of this bizarre, supposed dichotomy.
163.

Josh (August 18th, 2008, 7:40 am)

Tables are gay…anyone who is a web developer runs into gayness with tables at some point.

Once again…

tables = gay

Other than that great article…haha

Josh
164.

Steve P (August 18th, 2008, 1:12 pm)

Sigh.

Flickr, Google et al use tables for layout, because they’re pragmatic about coding stuff. Who cares?
165.

Toan (August 19th, 2008, 10:05 am)

it’s because of articles like this one that i love smashing magazine
166.

Nicole (August 19th, 2008, 2:47 pm)

Thanks for the nice article. It so happened that some days ago, I presented 30 CSS table styles on my blog: Link [www.younic.de]
If you like this article, maybe you’re interested in additional styles.
Cheers, nicole
167.

Matthew Dippel (August 19th, 2008, 3:57 pm)

Well written (unlike my comment to follow . . .)

I’m getting annoyed with this whole movement *away* from tables in places where *only* a table makes sense. With later browsers, we have access to better methods for formatting a page’s general layout and using a table to do so is evil. I’ve had to deal with nested upon nested tables used strictly for layout, so I understand why the table tag is looking about as good as the frame tag.

That said, table makes tables. div/span et al are great for formatting (ul/li is starting to get evil though).

Failing to use the table tag when you actually have table data means you’ve failed to supply the browser with a hint of what is coming. It’s fine when every browser is a desktop browser of a reasonable resolution. Mobile browsers, however, may choose to format the data differently in order to optimize it for a small screen. If you pass in your creatively formatted table using the latest divs and spans and uls and li blocks, you’ll end up displaying that data in a very awkward way.
You’ll also cut out Excel importing (and any other method for grabbing “web data” until microformats are widely in use). I know … importing web data to excel can be evil too … but it’s common for enterprises and the “table” blocks are easy to parse purely *data* from.

To the author(s), I bookmarked after reading your IBM/Apple/others Q1/Q2/Q3/Q4:
“The above data were fictional and made up, please do not sue me”
… it really is the little things.
–
Matt
168.

Romit Gadhiya (August 20th, 2008, 1:38 am)

Dude!
Thanks for the article.
169.

adam (August 20th, 2008, 3:33 am)

i wish so called designers really new about web. i use div’s span’s a lot but there are many cases you can not replace tables because you make coding longer, harder and broken for different browsers. what is the gain?? nothing but headache. please guys learn the differences between these concepts. everybody loves coding with css but that doesn’t mean you have to remove table syntax from your design. use them a lot so you can make more elegant designs ;)
170.

Ramnath (August 20th, 2008, 4:39 am)

Gud. Article. Hey designers dont think table is F****** one and its not a SIN. You can use in specific place, or where ever u need.
171.

MikeWhoBikes (August 20th, 2008, 1:36 pm)

Congrats on winning the guest author contest! This really was a great article: useful, well-written, and inspiring. Keep up the great work.
172.

chris (August 20th, 2008, 5:02 pm)

Reading some of these comments just has to make you laugh.

‘F*** tables’. Are you pretending to know what you’re talking about because you read in on Digg 2 years ago. Tables should be your only option when looking to display tabular data.
173.

Rakesh.S (August 21st, 2008, 12:17 am)

Superb article. My idea about CSS table-less design has taken new dimention :-D
Thanks for the post.
174.

Francesco (August 21st, 2008, 1:04 am)

very fantastic tables :)

thank you for post!
175.

Hinduismnet.com (August 21st, 2008, 1:14 am)

It is a pity that there are lot of people here who feels tables suck, this is plain stupidity. Tables need to be used for tabular data!
176.

aardvarked (August 21st, 2008, 2:25 am)

It’s a shame so many so called web designers are totally ignorant to what tables should be used for.

This article displays their purpose perfectly, anyone saying tables should not have been used for any of the examples is talking absolute nonsense and has been reading too many “CSS vs. Tables” articles and totally missed the point.

Great article
177.

Kyle Jacobson (August 21st, 2008, 1:30 pm)

Peter-Paul Koch’s tables Link [www.quirksmode.org] are terrific. Really worth checking out!
178.

Thomas (August 23rd, 2008, 2:23 am)

Great Article, Congrats for the win :)
179.

giat (August 23rd, 2008, 6:16 am)

congratulation ya!!!
180.

funfun (August 23rd, 2008, 9:10 am)

(: cool
181.

Babatunde Adeyemi (August 24th, 2008, 7:10 pm)

Nice piece
182.

Parker (August 25th, 2008, 11:47 am)

Tables for tabular data are ok, but still they have to be 100% accesible. Using images in cells just to make round corners is nice but not truly accesible, sorry.
183.

Hieu (August 26th, 2008, 7:12 pm)

I really like this detailed article. It gives me more insight about how to style up tables and couple of useful/accessible mark-ups. Thank you for the great post.
184.

David Boyd (August 27th, 2008, 10:55 pm)

Thanks for the great post…. I will be definitely using Table Number 9 on one of my site. Very handy.
185.

erick (August 28th, 2008, 8:41 pm)

congratulation ricky :) Good Job :D
186.

ay (August 31st, 2008, 4:27 am)

It’s complately true. :)
187.

James (September 1st, 2008, 9:40 am)

Hm, nice article - reminds me of the one Veerle Duoh did years ago.

I’d say that semantically the highlighted column in example no.6 should probably be marked up as simple th’s with scope=”row” rather than using a colgroup and col elements - Incidentally, that’s the kind of data table I find myself using most often in my corporate web job.
188.

gareth (September 2nd, 2008, 2:24 am)

Tables for data, forms (you know, lists of data and data entry) divs for page styling and laying out information.
No matter how much you love css and divs (and i do) there comes a time when tables are appropriate.
189.

mrgtb (September 4th, 2008, 3:35 pm)

Good use of using CSS in Strict
190.

gaurav (September 27th, 2008, 12:38 am)

jus trying!!!
nice tables css
191.

Webdesign Internet Marketing (October 1st, 2008, 10:59 am)

Thanks so much. Great piece of styling.
192.

Carou (October 6th, 2008, 10:27 am)

The hover effect doesn’t work in IE 6
193.

Eddie (October 16th, 2008, 5:59 pm)

Stick a table up your bum bum
194.

Mario Koerbler (October 17th, 2008, 12:54 pm)

Thank you for this website!

Best regards from Austria,
195.

Sidimar (October 22nd, 2008, 2:24 am)

Fantástico…
Parabéns!!
196.

pete (October 26th, 2008, 9:37 am)

For those who say ‘tables suck’. Tables shouldn’t be used for designing page layout. Mainly because of disabled people (screen readers read table cells from left to right and then skip to the next row, so you can imagine screen reader reading all the design stuff). But for tabular data we should use tables!!!
197.

kenny (October 31st, 2008, 2:17 pm)

LOVE THIS. thank you.

You could make the “source package” link much more prominent. I spent a lot of time trying to “view source” and re-create the right CSS before I saw that link…but then it was a breeze!
198.

jaime (November 5th, 2008, 1:45 pm)

nice code, txs!!
199.

wanglei (November 10th, 2008, 1:54 am)

太漂亮了！
200.

Wayne Whitty (November 11th, 2008, 5:17 am)

I can say, without a doubt, that I absolutely love this website. Thanks for sharing the CSS! Other websites would have just shown a screenshot and left it at that; without even leaving behind the stylesheets!
201.

Irfan (November 12th, 2008, 2:17 am)

Good Article!
I tried to download the source but it asks for user name and password.
Can any one help?
202.

Doug (November 20th, 2008, 10:01 am)

Good article. I’m amazed at how people hate tables. It shows lack of experience. Back in the day, it is all we had. For the dynamically generated sites I create (in Perl which I’ll probably get bagged on for), tables are a quick and efficient way to generate pages. No WYSIWYG editors are needed. Just good old hand coding. CSS is primarily used for style not positioning.

In the end, website visitors don’t care what methods are used to display the page. As long as it works and looks good. Web developers should use all the methods at hand to develop efficiently so they can make a dime.
203.

leo (November 24th, 2008, 2:59 am)

ey dude you talk about 100% css table, but you still using tables:

css 100% = no tables :)
204.

coldcoffeebreak (November 24th, 2008, 8:37 pm)

for those who said that table is suck, my question is can you do a tabular data with 50 columns & 300 rows using divs?
205.

slee (December 1st, 2008, 4:47 pm)

just wanted to say thanks as this helped me with some ideas for a table i was working on late into the evening
206.

satyanarayana (December 1st, 2008, 8:57 pm)

i have to learn css styles i think your site i have to use to me thanks good
207.

Malte Nielson (December 3rd, 2008, 6:11 am)

Great article.
208.

Compa (December 3rd, 2008, 9:38 am)

Excellent great job. Very useful. Thanks
209.

anushka (December 4th, 2008, 7:18 am)

thanks dude
nice work
210.

Kudaravalli’s (December 4th, 2008, 10:50 pm)

WOW nice
211.

Dave (December 4th, 2008, 11:11 pm)

Cool. thanks for this.
212.

Ben (December 11th, 2008, 4:55 am)

NIce one..as Said, tables are for tabular data so don’t say “F*** Tables”
213.

mehmet murat huyut (December 12th, 2008, 7:47 am)

Thank s good for me…
214.

Furqonk (December 16th, 2008, 1:00 am)

Thanks for table css, i will use it for my internal application.
It’s really hard to create such as great css table when your time is running out. ..
God Bless U
215.

DMuns (December 17th, 2008, 1:39 am)

Wow…I don’t get all the flaming of tables on here, even for layout purposes. I have had great success using a combination of tables and CSS for my site layouts, and they work without fail cross-browser almost 98% of the time. (Occasionally I run across some ticks, but nothing that can’t be quickly worked out.) I agree with the comments that “Doug” gave a few comments above this one.

I think all the CSS purists out there are missing the boat: CSS is a means for styling and visual appeal. You still need elements of HTML no matter what. It does not make you cooler than your neighbor to blindly state that “tables suck”. They can be very useful for all kinds of things, above and beyond just tabular data.
216.

David Bloomfield (December 23rd, 2008, 6:41 am)

Great article

Yes some of the table examples here arent tabular data and could be better displayed in a list but people saying “crap”, “tables suck”, etc show they have little understanding of semantic (X)HTML.

When tables are used for their proper purpose they are perfectly accessible and you prove they can look great.

Keep up the good work Smahing Magazine!
217.

Pixelate Webdesign (January 2nd, 2009, 5:34 am)

Thank you! This saves a lot of work! And I agree use tables where tables are meant for
218.

Fark This World (January 12th, 2009, 1:42 am)

Thanks for this. Helps me a lot dude…And to all the table hater’s, suck these nuts….
219.

Vincent lauv (January 22nd, 2009, 10:49 pm)

Thanks you it is very good idea to use css table

I currenty using at my site at Cambodia Tourism Website

Thanks
220.

Michiel (January 30th, 2009, 6:10 pm)

I love the way there are more table-basher-bashers than table-bashers XD

I think that it’s lcear that tables are a no-no for webdesign and a yes-yes for tabular information. How about we stop telling people this?
221.

Jamiel Sharief (February 2nd, 2009, 3:31 am)

Thank you for putting this together, its just what I have been looking for.
222.

Kris C (February 3rd, 2009, 11:57 am)

As a user experience designer who loves the look of free-floating text with white space as dividers, I really appreciate this article and the time it took to put all these samples together. Sorry the author has to deal with so many ridiculous comments by non software-designers who fail to grasp what the article is about, but I love it. I will be able to point to my developers and say “Make it look like this, please!” Great variation in examples too - very nice. I’m sure a lot of usability and software design folks found this helpful whether they waded through the multitude of comments to say so or not. :-)
223.

Pieter (February 7th, 2009, 7:33 am)

To all who say tables are bad, they’re not.

Tables are bad if they’re used for layout.
If you have to show your visitors a large amount of data, numbers, whatever, you can show them in tables. That’s what they are made for.

Good article.
Pieter
224.

Andre Morgan (February 12th, 2009, 7:06 am)

Ahhh tables……sigh…what can I say….they really do suck for building layouts but I must say that they have their time and place. They actually still work well (and dare I say maybe better) for presenting tabular information such as in the examples above.

….But don’t get the wrong idea, I still hate working with tables :-P.
225.

mikeymouk (February 18th, 2009, 7:31 am)

thanks for sharing this. May everyone feel happy with whatever they use as long as it fulfills their purpose. There is no competition on knowledge on the internet, and even less reasons to manifest its tensions. long life to free sharing !~
226.

tanya (February 19th, 2009, 3:14 am)

I love the css style for table, but IE6 is such a pain.
227.

ecoy (February 19th, 2009, 9:47 pm)

Yikes, it’s really annoying when people post just for the sake of commenting. Someone said about youtube-like comments, yeah i read a lot of them here, (wish i could filter these noobers out) Imagine presenting a 30 column data with divs, what do you get ? Divititis. Present these data in tables, then you’re called a sucker! And and, to all MySql programmers, “tablesuckers” said that you display your data in divs, HAHAHA err. sometimes purists are close-minded people just the way some people define rock as noise and not music. :)
228.

Frank (February 27th, 2009, 5:54 am)

Does somebody know any great tables in tables design?

And for al the “tables suck people” good luck with your span/div/dd/dt “tables”, they will suck for sure :D.
229.

Iztasarim (February 27th, 2009, 12:43 pm)

[..] great post,thanks R. Christie [..]
230.

Anonymous (February 27th, 2009, 10:49 pm)

There’s a reason why tabeless works and tables are inflexible. It’s a stupid argument to say that you’re going to make a site rigid rather than spend more time making it extensible.

Today, that’s just unacceptable.
231.

anon (March 8th, 2009, 10:06 am)

To all who say tables are bad!
Link [www.pmob.co.uk]
232.

amjed (March 8th, 2009, 11:23 pm)

Awesome article Christie, every web developer gotta have a copy of this page ..
233.

JW (March 9th, 2009, 3:24 am)

Excellent - just what I was looking for. A clear and concise explanation of how to present tables. It’s dismaying to have to read through the ‘noise’ of the CSS kiddies though, who haven’t discovered tabular data yet, but have just heard ‘tables are bad’.

Tables rule for tabular data. When the kiddies move on from just posting pictures of their game snapshots, and encounter real world data, they might realise that! :-)

Many thanks for the article.
234.

website design (March 30th, 2009, 11:29 pm)

I like this article,it described the css and table in details,I like it,I will study it carefully.
235.

Djoh (March 31st, 2009, 3:37 am)

Thanks a lot
236.

chonghwi (March 31st, 2009, 9:13 pm)

wow.. bravo.. thanks for the effort..
237.

Difre (April 2nd, 2009, 1:15 am)

Thank you so much for the source package, save a lot of time.
Nice work,
Much appriciated
238.

Erik (April 2nd, 2009, 2:00 am)

In some cases, I think you need to use the border-collapse property to get rid of the gaps between columns. As stated in the article, be careful.
239.

BOGAD (April 21st, 2009, 5:18 am)

Good Job..^^
G B U
240.

mgyaykhae (May 6th, 2009, 11:57 am)

many thanks !
241.

Sergio Rivas (May 20th, 2009, 9:20 pm)

Wow, I thank you for teaching me in a practical way.
One question, how do you justify a round image when is only one column? I have not been able to divide 2 images in the same square, I have to do a table in that square. Any help, please?
242.

Developer (May 21st, 2009, 8:03 pm)

Wow!!!

Excellent….
243.

dellvostro (May 26th, 2009, 7:57 am)

Can these tables be used multiple times on same page? I have one table working just fine. But if I try to copy and paste the table into another area of same page, the formatting doesnt apply to second table? If I copy a totally different table style, it appears fine. strange. ???
244.

serverman (June 13th, 2009, 1:28 am)

zip file won’t open. Kindly replace source code. Nice article though. Thanks.
245.

JR Chew (June 14th, 2009, 9:14 pm)

Tables aren’t bad when you need to display tabular data… Using tables for page structure and layout is what is bad.
246.

div (June 15th, 2009, 5:03 am)

very useful info.
247.

Tony (June 24th, 2009, 1:12 pm)

Just wanna say to all you table haters: “Back off!” Tables suck for layouts, but for displaying data in table format they are exactly what you should use!
248.

Toni McConnel (June 28th, 2009, 11:28 am)

Thank you for this detailed article that took a LOT of time to create. Sorry you have to wade thru so many ignorant mean-spirited responses. Most of us DO appreciate your efforts.
249.

hohoho (July 1st, 2009, 7:56 am)

Enough with the table cries. Don’t like them, don’t use them.

They’re so “evil” that Google is full of tables. Ever looked at their source code? Why do you think Google uses tables in their results pages and search forms? Cause they’re accesible and will work on ANY browser. freaks of nature…
250.

Chris K. (July 2nd, 2009, 12:05 am)

very very nice ! Thanks a lot guys !