Top 10 CSS Table Designs

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 Section1. 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 package2 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?

Footnotes

  1. 1 http://www.htmldog.com/guides/htmlbeginner/tables/
  2. 2 http://www.smashingmagazine.com/images/express-css-table-design/express-css-table-design.zip

↑ Back to top Tweet itShare on Facebook

Some contributors with just a single posting. To learn more look at our ebook.

Advertising
  1. 1

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

    1
  2. 2

    another great post smashing!!! beautiful tables.

    -1
  3. 3

    F*** tables

    -8
  4. 4

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

    -1
  5. 5

    Tanner Christensen

    August 13, 2008 12:04 pm

    Tables? Seriously?

    -17
  6. 6

    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!

    2
  7. 7

    Praise ye table! :)

    0
  8. 8

    Tables for tabular data, who woulda thunk it..

    Good article, some neat tricks, and very nice looking tables.

    4
  9. 9

    “F… tables”

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

    -1
  10. 10

    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.

    3
  11. 11

    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.

    1
  12. 12

    You’re darn right about that! :-)

    1
  13. 13

    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

    -1
  14. 14

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

    0
  15. 15

    you can fake tr:hover in IE6 with a little JS:

    onmouseover=”this.className=’trhover'” onmouseout=”this.className=’trdefault'”

    1
  16. 16

    Ooops. I used HTML… thats a no-no. I meant to say “seems to have forgotten all about the table caption tag though”.

    1
  17. 17

    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.

    6
  18. 18

    Brilliant, learning more all the time!

    -1
  19. 19

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

    2
  20. 20

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

    1
  21. 21

    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.

    4
  22. 22

    Abdulsalam Alasaadi

    August 13, 2008 12:44 pm

    Great Post.. keep it up.

    1
  23. 23

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

    1
  24. 24

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

    1
  25. 25

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

    1
  26. 26

    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 !

    2
  27. 27

    Great article!

    I’m still using tables to represent data, and this is a good way to “refresh” my table design.

    Really good job

    0
  28. 28

    No no, table not sucks!
    Don’t understand wrong the tables.
    Tables is only for tabular data.
    Anyway, great article, thanks Christie!

    2
  29. 29

    great !!!

    1
  30. 30

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

    -10
  31. 31

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

    2
  32. 32

    Great article, beautiful tables. Thanks!

    1
  33. 33

    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!

    5
  34. 34

    Excellent guest article. Thanks.

    1
  35. 35

    Learnt something here, thanks for the great post

    1
  36. 36

    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.

    1
  37. 37

    Absolutely great! ñ_ñ

    1
  38. 38

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

    1
  39. 39

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

    1
  40. 40

    Great article….

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

    Thanks Christie

    1
  41. 41

    nice tables :)

    1
  42. 42

    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 CSS Table Gallery is the only design resource featuring tables that I’ve encountered so far.

    0
  43. 43

    Great one! Thanks!

    0
  44. 44

    tables still give me a hard time. good post!

    0
  45. 45

    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

    0
  46. 46

    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…

    0
  47. 47

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

    -1
  48. 48

    Tables are not bad. They just need to be used for what they are invented for, ehh… tables. Use divs for the layout

    0
  49. 49

    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.

    0
  50. 50

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

    0

↑ Back to top