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.

Advertisement
  1. 1

    Such an amazing article! :D
    Thanks a lot!

    1
  2. 402

    Kismat Konnection

    April 19, 2012 8:34 pm

    Thanks R. Christie for “Top 10 Express CSS Table Designs”. Its really Very Helpful, Thanks once again.

    -1
  3. 803

    Great work, Sir. It helps me a lot… Thank you very much.

    1
  4. 1204

    Yeah, this html fails in the validator (http://validator.w3.org/check). But changing them from ID’s to classes should sort it out. If

    1
  5. 1605

    Just what I was looking for. Many thanks!

    -1
  6. 2006

    It might be a bit late. But as I like being lazy, I see you want to add classes for certain effects.
    In stead of the even/odd class, you could be using tr:nthchild(even) and tr:nthchild(odd).
    The CSS2 standard also has :lastchild and firstchild pseudoclasses, which you can use for the rounded edges.
    Or even better:
    -moz-border-radius: 15px;
    border-radius: 15px;
    These round the borders without needing images. :-).

    3
  7. 2407

    great ,it help me so much .Keep do this

    0
  8. 2808

    Great work! thank you very much for sharing!

    0
  9. 3209

    I’m not seeing it on #5 & #6. There’s no column shading or anything.

    1
  10. 3610

    I’m looking using Chrome, and 5 and 6 aren’t showing anything special.

    1
  11. 4011

    Jose Luis Morales

    November 26, 2012 7:40 pm

    Great, clean, minimalist, easy to integrate for my work proyects.

    Great work! thank you very much for sharing!

    From Venezuela.

    Happy day.

    0
  12. 4412

    Why can’t i see the code of the #9 Table background?
    is this: 1
    * html table tbody td
    2
    {
    3

    4
    /* IE CSS Filter Hack goes here*/
    5

    6
    }

    all there is to it? If so can someone give me the css style of all the table?

    Thank you in advance.

    -2
  13. 4813

    Matthias Kohlhoff

    January 25, 2013 8:52 am

    Thanks for this great collection! I searched for it …

    0
  14. 5214

    Great! awesome! thanks :)

    1
  15. 5615

    Awesome… Nice article for tables…

    1
  16. 6016

    Thank you for the nice tutorial… God bless you more!!!

    3
  17. 6417

    Thank you very much for the excellent and professional work you did :)… God bless!!

    1
  18. 6818

    Really sure about it ? Although most of the information provided is true as per my knowledge but I don’t agree fully. I think it should be more practical. I visited your website while searching for your topic and hope to see more good information on it. Do keep up the good work.

    0
  19. 7219

    Outstanding article. Great job and beautiful tables.

    0
  20. 7620

    Outstanding article!

    Thanks so much for taking the time to write and share.

    1
  21. 8021

    Nice and easy, thanks

    0
  22. 8422

    Use your English luas, and use google. If that doesnt work, you are going to have to go much further with your explorations. (flash, etc) A loading bar should generally not be used on a web page, and if you want a page that will upload, I think you may be looking to set up an FTP server, so look that up.

    0
  23. 8823

    This is nice.
    but i am looking for this style in DIV(without table).
    Anyone know how to do this with html5 tags?

    Thank you.

    0
  24. 9224

    wonderful thanks

    0
  25. 9625

    Very god article. Simple forward and quite helpful. Thank you.

    0
  26. 10026

    I like the tutorial, but I can’t help thinking that it would be a lot easier to make rounded corners with the border-radius command.
    Also for the alternating lines, there is no need to name every other row as “odd”. You can do that with nth-child.

    0
  27. 10427

    thanks heaps for this. its a great help.

    0
  28. 10828

    Great content. Thank you!

    0
  29. 11229

    Thank you very much.

    0
  30. 11630

    I want to customize first column of every row of a table. I am not able to find any solution. I am using easy table plugin for wordpress

    0
  31. 12031

    Thanks a million. Concise and helpful. God Bless. . .

    0
  32. 12432

    can some one please help me : how do you add data from the database onto that html table?

    1
  33. 12833

    plz explain how we design and color the table

    0

↑ Back to top