Menu Search
Jump to the content X

Top 10 CSS Table Designs


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 Link

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 -->
				<th scope="col" id="...">...</th>
	<!-- Table footer -->
	<!-- Table body -->


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 Link

  1. 1
  2. 2

↑ Back to top Tweet itShare on Facebook

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

  1. 1

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

  2. 2

    another great post smashing!!! beautiful tables.

  3. 3

    F*** tables

  4. 4

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

  5. 5

    Tanner Christensen

    August 13, 2008 12:04 pm

    Tables? Seriously?

  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!

  7. 7

    Praise ye table! :)

  8. 8

    Tables for tabular data, who woulda thunk it..

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

  9. 9

    “F… tables”

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

  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.

  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.

  12. 12

    You’re darn right about that! :-)

  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

    keep posting

  14. 14

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

  15. 15

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

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

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

  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.

  18. 18

    Brilliant, learning more all the time!

  19. 19

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

  20. 20

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

  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.

  22. 22

    Abdulsalam Alasaadi

    August 13, 2008 12:44 pm

    Great Post.. keep it up.

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

  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.

  25. 25

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

  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 !

  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

  28. 28

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

  29. 29

    great !!!

  30. 30

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


↑ Back to top