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 topShare on Twitter

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

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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

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

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

  32. 32

    Great article, beautiful tables. Thanks!

  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!

  34. 34

    Excellent guest article. Thanks.

  35. 35

    Learnt something here, thanks for the great post

  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.

  37. 37

    Absolutely great! ñ_ñ

  38. 38

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

  39. 39

    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.

  40. 40

    Great one! Thanks!

  41. 41

    tables still give me a hard time. good post!

  42. 42

    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

  43. 43

    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…

  44. 44

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

  45. 45

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

  46. 46

    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.

  47. 47

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

  48. 48

    Thomas Dedericks

    August 13, 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 :)

  49. 49

    Great article.

    sometimes Table is the best tool for job….they don’t suck just for being….unlike IE

  50. 50

    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.

  51. 51

    Great article. I almost forgot how to use tables since I don´t use them anymore for design purposes.

  52. 52

    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!

  53. 53

    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.

  54. 54

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

  55. 55

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

  56. 56

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

  57. 57

    If you need to build a decent email-based newsletter, you’re more than likely going to go with tables.

  58. 58

    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!

  59. 59

    Nice article, good to show certain twits in these comments what tables are actually supposed to be used for.

  60. 60

    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!

  61. 61

    Fantastic article!! Great job

  62. 62

    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 did almost a year ago… nothing new here…

  63. 63

    cool article, yeah tables really do eat a lot of time in designing them.

    thanks for this smashing article! :)

  64. 64

    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

  65. 65

    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…

  66. 66

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

  67. 67

    Simply pro. My second highest rate.

  68. 68

    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.

  69. 69

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

  70. 70

    abdullah alaydrus

    August 13, 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. 71

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

  72. 72

    There is one major problem in many of these examples. Numbers should almost always be right-aligned, so that people can quickly and easily see the relative magnitude of a number compared to the others in the chart. This is the way spreadsheets and ledgers do it, for good reason.

  73. 73

    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.
    http://www.frequency-decoder.com have a couple of great table examples but the one I use is
    http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

  74. 74

    Mithun Sreedharan

    August 13, 2008 8:52 pm

    Great words! Beautifully written!

  75. 75

    nice article…very very useful for tabular data.

  76. 76

    NissenPaaHaaugen

    August 13, 2008 9:24 pm

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

  77. 77

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

  78. 78

    very good article, thanks ;)

  79. 79

    Table examples presented here are for data only. So for those zealous web standards people, it will never hurt usability for presenting data. Just don’t use them for layouting, such an eyesore for those who were obsessive looking at your source page. Less is more! :)

  80. 80

    Great article….

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

    Thanks Christie

  81. 81

    nice tables :)

  82. 82

    beautiful tables,

  83. 83

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

  84. 84

    @ Jimmer
    You are absolutely right , we should consider the performance while working on tables.
    It also advisable to style rows rather than cells specially if you are going to use image as a background.

    (this is one of the best articles)

  85. 85

    Curt Simon Harlinghausen

    August 13, 2008 10:44 pm

    I like this article. Great job.

  86. 86

    See a jquery plugin for a tablesorter and zebra…

    jquery tablesorter

  87. 87

    tables suck…

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

  88. 88

    Not a bad article but way over the contest’s character limits. I think some of the other entries could have been better had they been allowed the character count that this entry used.

  89. 89

    Excellent work.

  90. 90

    Le table de err… victory or something … like that.

    Do you noobs never have tabular data to display? Tables don’t suck, they should just be used for what they were intended.

    Great article, tyvm.

  91. 91

    The first few comments in this article about tables sucking upset me, when displaying rows and rows of data tables are semantically the correct way to go.
    Excellent article with some great table designs, will definitely come in handy in the future!

  92. 92

    Great article !
    I just can’t understand why to advocate CSS hacks in the 9th solution. In this case, CSS conditional comments would have been the best solution instead of this uggly
    * html table tbody td

  93. 93

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

    http://www.webaim.org/techniques/tables/

  94. 94

    Best guest article yet!

    I can’t understand the comments about how bad tables are! Tables had a useful use, the writer didn’t say use tables for page structure.

    Tables are good as tables!!!

  95. 95

    Great article Smashing as always, but why does everyone have so much resentment for tables? Have they done something wrong?

    Just because we’ve all learnt div positioning that means we can say they ‘suck’? They don’t, when used in an appropriate context. Also, it is still the only way to create any level of layout within an e-mail.

    So just think…before you go writing off all those little tags you saw when Saving for Web and didn’t know what they meant ;)

  96. 96

    Tables do not “suck” when used for what they are supposed to be used for – tabular data. Tables suck when used for layout and slicing – and that is the main reason people dislike tables.

  97. 97

    Vitaly Friedman & Sven Lennartz

    August 14, 2008 12:57 am

    @all: tables are good. If you use them for the right purpose and in the right context — to present tabular data.

  98. 98

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

    For big websites with a lot of tabular data, and row/column data, tables are still the only sane way to code. But you only need to code that particular data, not the entire website. BUUUT again, we use CSS not table attributes to style it. Maybe we’ll just need cellpadding, os some small attribute, but that doesn’t mean we’re bad because “tables are history”. Tat means fewer CSS glitches and stuff, we all know and love IE6 :) Those people who flame the author probably never worked on a e.g PHP/MySQL financial website with admin pages and a looot of tabular data…be a little more serious, guys.

    So tables are not history, and they do not suck IF USED PROPERLY. Be a little more intelligent, don’t just flame :) Sorry for the long comment

  99. 99

    very good stuff

  100. 100

    Nice Article. Loved it.
    Tables still fu***** suck major. I guess I dont like them because I grew up without them and because you can in my graphic design apartment only find chairs. No tables. But sure if your using ‘em for tabular things, then your doing something right. Its jsut so awckward when your actually styling tables or writing it in the XHTML Markup because you know you can only use them for tabular but have seen people eat from the forbidden fruit to layout things with it. Right? Well with me this is always the reason why Im so disgusted by this fruit ;)

  101. 101

    I can’t wait to see an article here without a comment stating that this is “the worst article ever wrote on this site” or “the most poorly written article so far”.

    I thought we French were the only one to complain all the time, look like web designers all have a “French touch” after all ;)

    Anyway, great article. I like the rounded corner table, but then you have to specify a fixed width. I didn’t know the tr:hover, great tip.

  102. 102

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

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

  103. 103

    hey tables were never meant for layout. they were designed for appropriate tabular data and they just became popular for layout before web standards and css.

    i’ll find this article very useful some day, thanks

  104. 104

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

  105. 105

    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.

  106. 106

    Nice article,

    Have you ever seen Tablecloth ? 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

  107. 107

    What happens if you have a tabular layout?

  108. 108

    Best guest article yet. Something I can actually use!

  109. 109

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

  110. 110

    Thnks a lot
    nice article

  111. 111

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

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

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

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

    @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 */

    http://www.w3.org/TR/css3-selectors/#structural-pseudos

  116. 116

    @ 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. 117

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

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

  119. 119

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

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

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

    Daniel G. Blázquez

    August 14, 2008 7:30 am

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

  123. 123

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

  124. 124

    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. 125
  126. 126

    @Jackson Hyde

    Yes it will.

  127. 127

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

  128. 128

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

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

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

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

  132. 132

    Great post! And great looking tables!

  133. 133

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

    @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. 135

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

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

    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 table tutorial here.

  138. 138

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

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

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

  141. 141

    Thank u very much… very useful for my website…

  142. 142

    Very nice.

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

    ::emp::

  143. 143

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

  144. 144

    @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. 145

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

  146. 146

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

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

  148. 148

    Are you sure the last table is a Top one?

  149. 149

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

  150. 150

    Nice article!

  151. 151

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

  152. 152

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

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

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

  155. 155

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

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

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

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

  159. 159

    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.

    @add
    Thanks for that little JS trick. Fixes tr:hover in IE6 completely. Using Dean Edwards’ IE7 script 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.

    @Stefan and @Rafael de Paula
    Are you asking for a workaround for IE6 tr:hover? See above.

    @Julien
    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.

    @Jimmer
    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…

    @Bob and @Jackson Hyde and @KangarooDeziner
    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.

    @Carl Youngblood
    Yes, you are absolutely correct. Thanks for fixing.

    @Jeremy Brown
    That’s why we’re all waiting for CSS3!

    @JL and @mikemike and @mike
    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. 160

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

  161. 161

    @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. 162

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

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

    Sigh.

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

  165. 165

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

  166. 166

    Thanks for the nice article. It so happened that some days ago, I presented 30 CSS table styles on my blog: http://www.younic.de/styling-fur-html-tabellen-30-kostenlose-css-stylesheets
    If you like this article, maybe you’re interested in additional styles.
    Cheers, nicole

  167. 167

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

    Dude!
    Thanks for the article.

  169. 169

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

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

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

  172. 172

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

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

  174. 174

    very fantastic tables :)

    thank you for post!

  175. 175

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

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

    Peter-Paul Koch’s tables over at quirksmode are terrific. Really worth checking out!

  178. 178

    Great Article, Congrats for the win :)

  179. 179

    congratulation ya!!!

  180. 180
  181. 181

    Babatunde Adeyemi

    August 24, 2008 7:10 pm

    Nice piece

  182. 182

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

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

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

  185. 185

    congratulation ricky :) Good Job :D

  186. 186

    It’s complately true. :)

  187. 187

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

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

    Good use of using CSS in Strict

  190. 190

    jus trying!!!
    nice tables css

  191. 191

    Webdesign Internet Marketing

    October 1, 2008 10:59 am

    Thanks so much. Great piece of styling.

  192. 192

    The hover effect doesn’t work in IE 6

  193. 193

    Stick a table up your bum bum

  194. 194

    Thank you for this website!

    Best regards from Austria,

  195. 195

    Fantástico…
    Parabéns!!

  196. 196

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

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

    nice code, txs!!

  199. 199

    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!

  200. 200

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

  201. 201

    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.

  202. 202

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

    css 100% = no tables :)

  203. 203

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

  204. 204

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

  205. 205

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

  206. 206

    Great article.

  207. 207

    Excellent great job. Very useful. Thanks

  208. 208

    thanks dude
    nice work

  209. 209

    WOW nice

  210. 210

    Cool. thanks for this.

  211. 211

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

  212. 212

    mehmet murat huyut

    December 12, 2008 7:47 am

    Thank s good for me…

  213. 213

    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

  214. 214

    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.

  215. 215

    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!

  216. 216

    Pixelate Webdesign

    January 2, 2009 5:34 am

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

  217. 217

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

  218. 218

    Thanks you it is very good idea to use css table

    I currenty using at my site at Cambodia Tourism Website

    Thanks

  219. 219

    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?

  220. 220

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

  221. 221

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

  222. 222

    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

  223. 223

    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.

  224. 224

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

  225. 225

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

  226. 226

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

  227. 227

    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.

  228. 228

    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.

  229. 229

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

  230. 230

    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.

  231. 231

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

  232. 232

    Thanks a lot

  233. 233

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

  234. 234

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

  235. 235

    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.

  236. 236

    Good Job..^^
    G B U

  237. 237

    many thanks !

  238. 238

    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?

  239. 239

    Wow!!!

    Excellent….

  240. 240

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

  241. 241

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

  242. 242

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

  243. 243

    very useful info.

  244. 244

    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!

  245. 245

    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.

  246. 246

    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…

  247. 247

    very very nice ! Thanks a lot guys !

  248. 248

    While tables may make it easy initially it can be a maintnance issue later on.
    Doing css for anything but tabular data is not exactly intelligent.

    However it can and should be ok for proper tabular data.

    Doing it another way is foolish, especially in light of the stuff I have seen done where we feed a website with huge data feeds that are in table list form.

    Ie; huge mainframe push ..doing it any other way than a table would be pretty stupid here.

    In the above we are talking of about millions of cells. Very much like a spreadsheet view.

  249. 249

    Really an evergreen post, thanks!

  250. 250

    You amatures, if you’ve ever worked in web design for any ecommerce company you’d know most server codes have to utilize within TABLES. Never using tables is fine for your personal website, but even Google uses tables… heavily. Sure, I know tables have a bad rap since a lot of people use them over CSS layouts but Tables are not going anywhere anytime soon.

  251. 251

    SohoInteractive

    July 19, 2009 5:07 pm

    Great collection
    Thanks you
    F.

  252. 252

    David J. Heinrich

    July 31, 2009 5:18 pm

    Regarding the issue with vertical tables being inappropriate, that would seem to be right. The reason is because of the way screen-readers interpret them; how they are supposed to be interpreted by browsers. A screen reader will read a table row by row. Hence, data in rows should have relation to each other. The data in table #2 has no relation to each other (Scary Movie, Indiana Jones, The Punisher, Wall-E). This is because the first column isn’t a series of “column headers”.

    I think that the post saying that the proper way to display that would be as headings and unordered lists would be correct. Part of the other issue here is that there’s no reason why he lists of movies under a certain category has to be of the same length.

    As for how to get the side-by-side layout, you could abandon that and leave it as sequential layout (one beneath the other). Or you could use CSS floats to try that (but then you’d have to use the hacks to make sure they line up). If you’re fine with letting older browsers see it sequentially, you could use the new CSS tables layout method. This is a simple way to get a tables-like layout with just CSS; but it will only work on IE8, FF3, and other newer browsers.

    A sloppy hack that would still be better than expressing it as pure tabular data would be to nest headings and unordered lists inside of table data in a simple table with one row.

  253. 253

    government subcontractor

    August 19, 2009 8:27 am

    Most of my contracts is converting old code to ASP.Net. The government has a lot of data and most apps are for the display and transfer of data. Very large databases are now using MS SQL and table are a large part of the UI. CSS is cool but not a cure all. Thanks for showing the difference in styles. it is what i want to know. Great job!
    Thanks

  254. 254

    nice article. Are css tables useful? I guess it’s more to do with if it’s properly used such as in tabular data vs layout div tags.

  255. 255

    Am I the only one not seeing any of the examples in the article? I tried it in firefox 3 and IE 8

  256. 256

    The examples all look the same to me (firefox 3, ubuntu). I assume someone removed the appropriate lines from the CSS file…. :)

  257. 257

    can you please fix the css on this article please? Thanks!

  258. 258

    Yeah table design not showing up. Please fix. Need some inspiration.

  259. 259

    Sorry folks. Vitaly just fixed it.

  260. 260

    every tag with html have their own reason, and if you want to show data, you need to use table! Don’t use div with flow etc …

  261. 261

    tr:hover does not work for IE but you can make use of className property example:

    CSS

    .trover{
    backgroud : #99BCBF;
    }
    .trout{
    backgroud : none;
    }
    —————————————————————————————————
    HTML

    using onmouseover and onmouseout you call the className depending if mouse is ove or out

    inside tr tag you put

    initializing with class = trout
    onmouseover = className=trover
    onmouseout = className = trout
    ——————————————————————————————————-

    This way you get te effect of tr :hover if your table is being seen usig IE. Hoper this comment is useful.

  262. 262

    very good article keep it up.

  263. 263

    When people refer to “Using Tables Is Bad!” what is meant by that is the actual use of tables to layout and structure the websites data areas. This used to be ever so popular in the early days of the web. Using a table inline with the rest of your content is very acceptable and sometimes is the best way to display a group / collection / sampling of data just like the examples used in this article.

  264. 264

    I see alot of comments like “tables suck” and “**** tables”. To me it sounds like you peolple who wrote these comments dont know why, you just think its a cool thing to write.

    I have to say that though tables are most often a bad idea (like when people use them for entire layouts and such), there are times when they are very useful, like in the examples above, to use floats in such simple structures is simply overkill.

    To the author of this post I say bravo… I will probably use these alot.

    Visit my website by clicking on this link

  265. 265

    very great article thanks for share, it help me a lot specially its “valid xhtml 1.0 strict” markup. usually i play with div even tabular data. but after now i am going to work on table for tabular data, thanks again for the nice post :-)

  266. 266

    Hi there!
    I love this list ….excellent!! Thank you so much!

    I have a question: Is there any possibillity to “sort” one of these lists?

    Hope someone can help me put :)

    greetings from germany
    klickjobs

  267. 267

    These are amazing!!!!

    Thank you!

  268. 268

    if it is a table you require, then it should be a table that you get.

    nice tables.

  269. 269

    I did two tables that I think are worth sharing (cause I’m proud of ‘em):
    http://www.caplinq.com/specialty_tapes/polyimide_kapton_tapes.html
    – Notice the alpha-image bottom right, and interchanging rows

    http://www.caplinq.com/linqstat_vcf_s-series_linqstat_volume_conductive_film.html#
    – A price table – looking sharp and clean.

  270. 270

    good job!!!!!!!!!!!!!!!!!!!!

    thanks for all

  271. 271

    Of all the designs, I think the zebra tables are most appealing, particularly when the contrast is just high enough for a wide variety of users to differentiate between rows. It improves the readability of the table.

  272. 272

    I’m wondering how to create a multi tabbed html table. The reason being is because I want to have 4 tables displayed on a single page. But only show one table at a time with an option for the user to switch from one table to another using tabs. I found an example of a website using this table at http://www.hertsbaseball.com I’m not to sure how to achieve this but I think it will probably involve jquery

    thanks

  273. 273

    Is anyone else having trouble unzipping the source?

  274. 274

    @Matt : I think you may have issue with the permissions of the files inside the zip, just do a chmod755 in the extracted directory ;)

  275. 275

    Great stuff very help full.

    Thanks

  276. 276

    Nice designs.
    Thanks & happy new year!

  277. 277

    Nick, seriously? You don’t know how to use CSS to create tables without using the DEPRECEATED, OBSOLETE, NOT W3C compliant HTML?

    LOL…. RTFM.

    http://www.w3schools.com/css/pr_class_display.asp

    FAIL

  278. 278

    I recently used this in a project. Wow, it looks so professional. Thanks a mill.

  279. 279

    @Ben: True, but with inline technic there is flaw if u have more columns and u want them to strech dynamicly. Lets say you have 3×3 matrix. And u change size by CSS or with bigger name/data in one cell (selected cell is located in second row, second column), result is messy table, because second row is pushed to right.

    Take a break. Enjoy in life.

  280. 280

    Nice!Nice!Nice!

  281. 281

    Awesome…style dude…thanx a lot…

  282. 282

    Google Jquery tabs.

  283. 283

    good post….i will use this for my website

  284. 284

    Beautiful I’ll use it.
    I most agree that tables is not the most attractive way to display data.
    But, in every application there is a backoffice section which most of it rendered as tables and for the right reason I think.

  285. 285

    Fantastic article, thank you. Although, I can’t understand why people are commenting on the use of tables in layout, etc – this article is to do with display of tablature data – it’s nothing to do with laying out a website and the arguement of tables vs. CSS, etc.

    I think people just need somewhere to vent. I must admit website design and development is damn stressful ;D but basically, loving the article, very useful, thank you. Good luck with your college work C: xx

  286. 286

    Hey there, how do I implement this into my current style sheet?

    Thanks

  287. 287

    ClearStyleSheet

    March 6, 2010 1:37 am

    I agree about this!

    All those table-haters still dont see that tables used for complete layouts are bad design issue, not the tables used to display data structures. I would like to see what those people look like, when they have to display complex tables, with several row- and colspans. Dont you think, Google would use tables, if it was better – or easier to use divs instead? I guess professionals should understand the difference between tables used to display data, tables to layout a website and tables with four legs. :)

    Whith a litte smile on its face…
    CSS

  288. 288

    wow, great job.

  289. 289

    Aravind M Potadar

    March 10, 2010 2:40 am

    Very useful…..Thanks a lot for sharing the source file. I had been searching for this. Grate collections!!!!

  290. 290

    Very helpful article indeed. Worth reading. Please Keep up the good job.

  291. 291

    Very helpful article indeed. Worth reading. Please keep up the good job .

  292. 292

    nice tutorial, thank’s

  293. 293

    Great post!. Its indeed a Smashing article :).

  294. 294

    Yogendra Ghorecha

    March 31, 2010 5:36 am

    Gr8 tutorial, However provide more CSS to male it more concur.
    – Yogi Ghorecha

  295. 295

    This is one of the most useful articles out there. Thank you so much!

  296. 296

    Nice to see such articles………………..very helpful in table/grid designing !!!

    Thanks !!

  297. 297

    Good article .. Really helpful .

    Keep it up

  298. 298

    Can somebody tell me why hover dont work for me in ie8

    http://cope.users.sbb.rs/proba.html

  299. 299

    Jean-Francois Monfette

    April 21, 2010 10:49 am

    Exactly what I was looking for. I think I don’t have to search google anymore to find web design advices. I just have to search through Smashing Magazine and I’m done !

  300. 300

    Thanks! This post is very helpful for me.

  301. 301

    You know, one of the most important reasons that Tables are amazing, is for Emails. If you have a company that does newlsetters, etc, you’ll come to realize quickly that so many different email clients have different requirements, however, they ALL can read Tables perfectly. CSS’d and XTHML 1.0 validated of course.

  302. 302

    please tell me, how to create a table width css

  303. 303

    @Ben: Are you 10 ?

  304. 304

    This are some very good examples, however not for what I’d like to do…
    I have table of a week-schedule, I’d like to be able to style every column individually and every day has to be a different color (odd and even). Unfortunately I have no idea on how to do that, as I am a bit new to css. Any help would be greatly appreciated!

    This is a simplified version of the table:

    Day;Block;Class;Teacher;Location
    Monday;1;;;
    ______;2;;;
    ______;3;;;
    ______;4;Embedded Systems 1;Luc Fryant;D205
    ______;5;;;
    Tuesday;1;;;
    ______;2;Digital Systems;Bart Eestermans;D205
    ______;3;Light & Sound;Marjan Maes;D209
    ______;4;CCNA 1;Caroline Vanderheyden;P108Z
    ______;5;Digital Systems Lab;Patrick Dielens;P306
    Wednesday;1;Multimedia;Jan Janssen;P108Z
    ______;2;Networkdesign;Tony Binnemans;D011
    ______;3;Light & Sound;Marjan Maes;D211
    ______;4;CCNA 1;Caroline Vanderheyden;P108Z
    ______;5;Webdesign 1;Bart Portier;P108Z
    Thursday;1;;;
    ______;2;Digitale Systems;Bart Eestermans;E119
    ______;3;CCNA 1;Caroline Vanderheyden;P108Z
    ______;4;Embedded Systems 1 Lab;? (Den ambetanterik);P306B
    ______;5;;;
    Friday;1;Webdesign 1;Bart Portier;P108Z
    ______;2;;;
    ______;3;;;
    ______;4;;;
    ______;5;;;

  305. 305

    Thanks, Very good article.

  306. 306

    Amazing articles, It helped me a lot. Thanks!!

  307. 307

    Thanks a lot, having some pretty hefty creative block this afternoon. That’s what Friday afternoons are for though? :-)

  308. 308

    Nice Example of tables… :D

  309. 309

    Moises Urrutia

    July 9, 2010 9:56 am

    tr:hover does not work since ie did not support :hover pseudo class on anything but the anchor tag. The way to get around this is by using javascript to add a class of “hover” to your tr when your mouse is over it. Then you just create a style for tr.hover.

  310. 310

    Great article… thanks a lot..

  311. 311

    Yay tables!

  312. 312

    Dude, you should rename this article. It doesn’t design any tables with CSS, it just styles the “look” of them. Once you use a table CSS design is shot down.

  313. 313

    benjamin a. petersen

    July 28, 2010 4:36 am

    I love this article — I use the examples here as quick springboard for a table design all the time.

  314. 314

    I realize this comment is on a post from two years ago, but I was referred here from Dan Cederholm’s most recent book on markup, and I’m surprised no one has mentioned the “caption” element. It’s a tag I’ve often wished I could use with images, but its only home is inside a table at the very top: http://www.w3schools.com/TAGS/tag_caption.asp.

    Also, to Kimi above — content and CSS typically dictate the design together. If you have tabular data, what’s the concern about using a table rather than a mess of divs or lis? I recommend Cederholm’s chapter on tables.

    Anyways, nice post. :)

  315. 315

    asdas nice

  316. 316

    Great tutorial. I need this to know more about table style. Thanks

  317. 317

    i like that perfect and i think use my web site

  318. 318

    very good! I like !

  319. 319

    TABLEs r ugly and the hardest to work with, DIVs r much better

  320. 320

    It’s very useful to me. Thanks

  321. 321

    great article and very timely – thanks!

  322. 322

    Perfect !!!

  323. 323

    thank you. best sample

  324. 324

    Just excellent!

  325. 325

    Is there a reason you would apply the styles to IDs rather than classes?
    I thought IDs were supposed to be unique. There could be multiple tables on one page using the same style, in which case you would have to use the same ID twice to make the tables look the same.

    I suggest you change change #hoz-zebra to .hoz-zebra and to accordingly.

    Thanks for the nice styles ;)

  326. 326

    Excellent article, I tried few tables, modify a little and use one of them for personal site :)

  327. 327

    Thanks! This is great!!!!

  328. 328

    really nice and great….. Salute to your hardwork

  329. 329

    Nice designs..Thanks…

  330. 330

    it’s really good!!~useful for me, thanks!~upupup

  331. 331

    Nice CSS Designs !!!
    Simple and Elegant to use, thanks for the info.

  332. 332

    Ever since I started doing programming and searching for knowledge on the Internet, I haven’t found so many articles as good as this one.

    Thanks so much, R. Christie!
    Eric

  333. 333

    Very usefull you helped styling my tables very quicky using this examples. Thanks a lot!

  334. 334

    great tutorial…but More patterns and color combinations would be appreciated.

  335. 335

    Great job dude. Saved me loads of DT (development time).

  336. 336

    This is very awesome!!!! great tutorial.. keep posting a great tutorial.. Cheers!!! :)

  337. 337

    These tables rock my world.

  338. 338

    excellent info ! must be more people like you that share info so valuable and helpfull.

  339. 339

    thanks for creating a downloadable source files — made things a lot easier

  340. 340

    Genius! Thanks!!

  341. 341

    “About the author

    R.Christie is studying information systems at college. He viciously juggles activities from college, web design, programming, church, to sport activities. ”

    All seems fine except the church thing. Why brainwashing yourself when you have talent ?

  342. 342

    Hi guy, Thanks for the nice styles but I tried them with my cgi and they not working :(
    any help???
    Thanks

  343. 343

    @Mushal,

    While I’m not the original poster, I can tell you that saying “it doesn’t work” will do absolutely nothing to get help. If you’re having problems, state what you have tried and exactly what is going wrong.

    Here’s a great article on effectively reporting bugs: http://www.chiark.greenend.org.uk/~sgtatham/bugs.html

    That said, I have used these styles on several websites over the past couple years with no issues, and they obviously work here. So my guess is there is something going wrong in your implementation.

    Sorry if this is coming across strong. I work as a developer as well, and it can get frustrating when the only feedback you get is “it’s broken, fix it!” with no further information.

    Hope that helps.

  344. 344

    Coool… You’re so helpfull..
    Thank you so much to you ^-^

  345. 345

    awesome just what i needed….

  346. 346

    It is good. I was just wondering if it’s possible to create a custom Design for the table. (I’m using WP-Table Reloaded from WordPress).

    Mohit Chopra

  347. 347

    This is a great article. But i want to mention one important thing. Usually we display lot of stuffs in a table. That needs a scroll. Any best way to scroll the table content with the header column in tact. Becoz, I tried including a div with scroll inside tbody. Providing overflow attribute to tbody works in mozilla only. Does not work in IE. Any help would be appreciated.

    Thank you

  348. 348

    Super usefull thanks! I’m now implemented this on 2 of my websites… can’t say how happy I am with it!

  349. 349

    Dinesh Balendran

    March 27, 2011 6:23 pm

    Awesome you are a champ!

  350. 350

    Great article, it has helped me lot understanding tables and the icing on the cake was the source files, the explanation has simple to understand which made this article brilliant.

    Thank You very much

    P.S. wish someone could do the same with drop-down menus???

  351. 351

    Thanks a Lot..It was very usefull to me… Thanks

  352. 352

    thanks for sharing

  353. 353

    All seems fine except the chip on your shoulder thing

  354. 354

    Scott Foubister

    April 28, 2011 2:30 pm

    Thanks a lot, this was a great example to learn about tables styles.

  355. 355

    Thanks a lot,
    very nice work and helped me in styling my pages
    Cheers

  356. 356

    hi, plz help me im trying to create page that will upload and it must have processing bar

  357. 357

    Is anybody else having issues in IE8? For some reason, the table headings (column titles) are shifted more to the right. You can see what I mean if you view this article in IE8.. I couldn’t isolate the problem in the CSS. Any ideas?

  358. 358

    I fixed it by removing the width in the main class and adding a padding-right to the th.

  359. 359

    Something’s fishy about that CSS …. (.trout)
    Thanks for the code snippet, will come in handy, sorry for the bad joke :P

  360. 360

    I barely no idea with css and page design. You save my life indeed. Thank you for your kind of sharing things : )

  361. 361

    it’s special for me,thanks

  362. 362

    Download Google Chrome ASAP.

  363. 363

    Nanang Gunawan

    June 9, 2011 6:30 pm

    perfect table..

    thanks… very usefull….

  364. 364

    supah cool…

  365. 365

    Very nice! Thanks a lot!

    I add:

    cursor:pointer;

    to the tr:hover td styles when I use the table rows as links.

  366. 366

    I think vertical tables are legitimate and useful when you want to compare a few items to each other. The key is that each row should compare a single type of item, but each cell can contain several items. In the example here, the second row has several titles of movies. It would be wrong to put each movie title in a row to itself; it’s okay to have a different number of movies in each cell.

    If you wanted to add a third row, like top directors for the genre, for clarity you’d probably have to add a label column on the left. That would change the table back to a more traditional grid.

  367. 367

    Jessica Nolhein

    June 21, 2011 12:51 pm

    Hi there, nice to see you guy here – keep up the good work

  368. 368

    I guess you are :D

  369. 369

    Awesome post man… :)

  370. 370

    Good Job Bro…

  371. 371

    OMW. This article and the downloadable set of files just saved me some serious hours of coding. I was going to do the table in CSS, but with 3 columns and 10 rows – the spacing and formatting was going to be a huge nightmare. This works flawlessly – except for the CSS Rule – Border-Collapse – which just needs to be modified to cellspacing=”0″ in the HTML instead of trying to make it work in the CSS. EXCELLENT article though, I had no ideas tables could be so awesome!

  372. 372

    nice tutorial:)
    how to design table with fixed header with browser compatibility with pure css ?

  373. 373

    can anyone plz help me
    how to create a table with fixed header with browser compatibility ?

    only in pure css with no javascript ? ):

  374. 374

    @George Bonev:

    Yes, the church is good. It brainwashes all the stupid and inhuman stuff that you consume all day everyday. All in all, Christ saves! Bravo R.Christie for not being ashamed of the Gospel!!!

  375. 375

    I love them, quick access to some great CSS Table styling. Thanks!

  376. 376

    still so useful til this day! great tutorial, thanks so much.

  377. 377

    You could use a style generator for the tables as well. Here is one of them http://gridstyler.com, can do more of the basic things easily but limited.

  378. 378

    This article was great, I used to struggle with table css but this really really helped.

  379. 379

    Very valuable info….great tutorial..Thanks a lot man.

  380. 380

    Here is a tool which I use for simple table styling, mainly for data grid stuff. http://tablestyler.com
    The techniques are a little more in depth. You might be able to use the two together.

  381. 381

    Really nice work..will really help me to design tables quickly

  382. 382

    I’m reading this article also it seems to be terrific! Nice way of writing and you’ve got explained some excellent points with this issue.

  383. 383

    Thanks for the artcile, esspecially the source file! I learned lots from this!

    Thanks!

  384. 384

    thanks a lot! keep with this good job

  385. 385

    Very useful article .. thank you ..

  386. 386

    it’s very beatutiful & useful…
    how awesome it is..

  387. 387

    it is really helpful also looking beautiful. thank you for your inspirational tutorial

  388. 388

    Thank you for this; it was very useful to see some great layouts and give to some worthwhile input upon how certain attributes affect the readability etc :)

  389. 389

    Thank u so much…..:)

  390. 390

    I used one of those designs in my web programming exam, thanks man, i fucking hate designing shit :D

  391. 391

    You can add rounded corner to an table without using photoshop. In most modern browsers (that is no ie6) use this css tag:

    border-radius: npx;

    where n is number of pixels of rounding. I normaly use 5px.

  392. 392

    .Table {
    border: 1px solid #BBBBBB;
    border-collapse: collapse;
    padding: 5px;
    }
    apply this css for table
    .Table td {
    padding: 8px 12px;

    }
    .Table td td{
    padding: 0;
    }
    .Table td .Table td{
    padding: 0 5px;
    border-right: 1px solid #BBBBBB;

    height: 30px;

    }
    .Table .input {
    border: 1px solid #BBBBBB;
    background:#FFFFFF;
    width: 215px;
    height: 20px;
    }

  393. 393

    Thanks for posting this. I’ve been looking for a lightweight table. I see you have a few examples that highlight rows, can you post one that highlights columns?

  394. 394

    Not done any html / CSS for tables for ages – I’m a bit rusty.

    Thanks for the tutorial and thanks for providing the source files.

    Much appreciated.

  395. 395

    I can’t choose “bad” in the quality poll.

  396. 396

    Hey! Could you guys fix the CSS on this article, please? I’m using Google Chrome (in Ubuntu) and all the examples look the same! :(

  397. 397

    The table’s css is not seen here…

  398. 398

    Thank you very much
    over all are nice.

  399. 399

    Thanks for fixing it I keep coming back to this article everytime I need to style any tables in my projects <3

  400. 400

    Thanks for the great post; I know you wrote it three years ago but it is still proving profoundly useful to me…

  401. 401

    Such an amazing article! :D
    Thanks a lot!

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

  403. 403

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

  404. 404

    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

  405. 405

    Just what I was looking for. Many thanks!

  406. 406

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

  407. 407

    great ,it help me so much .Keep do this

  408. 408

    Great work! thank you very much for sharing!

  409. 409

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

  410. 410

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

  411. 411

    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.

  412. 412

    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.

  413. 413

    Matthias Kohlhoff

    January 25, 2013 8:52 am

    Thanks for this great collection! I searched for it …

  414. 414

    Great! awesome! thanks :)

  415. 415

    Awesome… Nice article for tables…

  416. 416

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

  417. 417

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

  418. 418

    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.

  419. 419

    Outstanding article. Great job and beautiful tables.

  420. 420

    Outstanding article!

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

  421. 421

    Nice and easy, thanks

  422. 422

    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.

  423. 423

    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.

  424. 424

    wonderful thanks

  425. 425

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

  426. 426

    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.

  427. 427

    thanks heaps for this. its a great help.

  428. 428

    Great content. Thank you!

  429. 429

    Thank you very much.

  430. 430

    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

  431. 431

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

  432. 432

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

  433. 433

    plz explain how we design and color the table

↑ Back to top