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

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!

Header in Top 10 CSS Table Designs

First things first

We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:

<!-- Table markup-->

<table id="...">

	<!-- Table header -->

		<thead>
			<tr>
				<th scope="col" id="...">...</th>
				...
			</tr>
		</thead>

	<!-- Table footer -->

		<tfoot>
	        <tr>
	              <td>...</td>
	        </tr>
		</tfoot>

	<!-- Table body -->

		<tbody>
			<tr>
				<td>...</td>
				...
			</tr>
			...
		</tbody>

</table>

You can read more about xhtml table markup in HTML Dog’s Table Section. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package is provided in the end of the article.

Before we start, let’s review the general rule of thumb for styling of tables:

  1. 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.
  2. 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.
  3. Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.

Now that we are all set up let’s get going, shall we?

1. Horizontal Minimalist

Horizontal tables are tables that are read rather horizontally than vertically. Each entity is represented by a row. You can style these types of tables with minimalist style. Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table. The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

The tr:hover rules are very useful to aid people reading a minimally designed tables. When the mouse cursor hovers over a cell, the rest of the cells in the same row highlights immediately, making it easier to track things if your tables have multiple columns.

Important!
Carefully finetune the typography and the padding between the cells
Pros
Very easy to style, good for simple tables
Cons
tr:hover rules don’t work in IE 6, table can be confusing if it has too many columns
Play with
Color scheme, typography, tr:hover effects

2. Vertical Minimalist

Although rarely used, vertically oriented tables are useful for categorizing or comparing descriptions of objects, with each entity represented by a column. We can style it in minimalistic style by adding whitespace separators between columns.

ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.

Important!
Carefully finetune the typography and the padding between the cells, do not add tr:hover effect
Pros
Easy to style, good for simple tables
Cons
Can not be used if background is not a solid block of color, suitable only for some tables
Play With
Color scheme and typography

3. Box

The most dependable of all styles, the box style works for all kinds of tables. Pick a good color scheme and then distribute background-color to all the cells. Don’t forget to accentuate the differences of each cell by defining border as a separator. An example of a box style table is the following table:

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

This style is nowadays probably the most used style. The tricky part is actually trying to find the color scheme that matches with your site. If your site is heavy on graphics, it will be pretty hard to use this style.

Important!
Choose a color scheme that matches with your site
Pros
Easy to style, flexible for large or small tables
Cons
Choosing the perfect color scheme could be tricky
Play with
Colors and borders, use dashed or dotted to achieve cute effects, typography, icons

4. Horizontal Zebra

Zebra-tables are pretty attractive and usable. The alternating background color can serve as a visual cue for people when scanning the table. To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).

	...

		<tr class="odd">
		   <td>...</td>
		   ...
		</tr>

		<tr>
		   <td>...</td>
		   ...
		</tr>

	...
EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
Important!
Do not put too much contrast on the zebra colors, you can blind your users
Pros
The zebra pattern can help people to scan the table
Cons
Adding class="odd" manually can be very tedious for large tables, many content management systems do not provide even/odd features on a table loop, hence picking the color scheme may be tricky
Play With
Contrasting color, borders, typography, icons

5. Vertical Zebra Style

Vertical zebra is easier to style than the horizontal one, as we can make use of colgroup and col elements to distribute column classes. However, the markup becomes a little bit heavier:


<table>

		<!-- Colgroup -->
	   <colgroup>
	      <col class="vzebra-odd">
	      <col class="vzebra-even">
	      <col class="vzebra-odd">
	      <col class="vzebra-even">
	   </colgroup>

		<!-- Table header -->
	   <thead>
	      <tr>
	         <th scope="col" id="vzebra-comedy">Employee</th>
	         ...
	      </tr>
	   </thead>

	   ...
</table>

The colgroup element actually applies a style or class to the table, columnwise. Instead of tediously applying class for the first td or th element, we can use a more convenient colgroup-tag. For more information about colgroup visit this page.

ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug’s Life

Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any other kind of tables.

Important!
Do not put too much contrast on the zebra colors, you can blind your viewer
Pros
Suitable for all types of tables
Cons
Choosing the color scheme could be tricky, need to add colgroup elements
Play With
Contrasting color, borders, colgroup and col, icons and typography

6. One Column Emphasis

In some tables, some particular column may have a higher weight than the other columns. If that’s the case, you can use colgroup and col to make that particular column stand out. In the example below, the first column serves as the starting point to read, so it is emphasized, just like we emphasize the first letter of the paragraph as drop caps:

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

You can also use one-column-emphasis-technique to highlight something important, say the column containing totals of an accounting table, or in a comparison table — for computer specification perhaps, the winning entity (column).

Important!
Be careful, don’t overdo the emphasis or the column will jump out, distracting the effort to read the rest of the columns.
Pros
Very effective when used in certain kind of tables
Cons
The necessary tr:hover effect does not work in IE, suitable for certain types of tables only
Play with
Color scheme, typography, icons and tr:hover effects

7. Newspaper

To achieve the so-called newspaper effect, apply border to table element and play with the cells inside. A quick, minimalistic newspaper style can look like this:

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and th). Other alternatives are presented below:

CompanyQ1Q2Q3Q4
The above data were fictional and made up, please do not sue me
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
FavoriteGreatNiceBad
Passion of the ChristBourne UltimatumShoot ‘Em UpAli
The Big FishThe MummyApocalyptoMonster
Shawshank RedemptionCold MountainIndiana JonesDead or Alive
Greatest Story Ever ToldI Am LegendStar WarsSaw 3
Important!
Be careful with border-collapse, do not lose the signature border around the table!
Pros
Gives a royal, authorative aura to a table
Cons
Unsuitable for large tables (it loses it’s charm on large tables)
Play With
Typography, color scheme, background, border, padding, and tr:hover effects

8. Rounded Corner

Rounded corners are slick and modern, and it’s easy to apply it to a table, although you need to fire up Photoshop for this. Create images for all four corners of your table. Theoretically, we can make use of the nesting tr and td-elements to place the left and right corners of the table without adding additional markup. Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. Please consider the example below:

CompanyQ1Q2Q3Q4
The above data were fictional and made up, please do not sue me 
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
Pros
Great if you want untraditional table, probably the only viable option you have if your website uses rounded corners heavily
Cons
Takes longer to style, requires images
Play With
Color scheme, corner variations, typography, tr:hover effects, icons

9. Table Background

If you are looking for a quick and unique way to style your table, simply pick an attractive image or photo related to the subject of your table and set it to be the background-image of the table. You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6:

pre class=”brush: css;”

* html table tbody td
{

/* IE CSS Filter Hack goes here*/

}

The table would look like this:

EmployeeDivisionSuggestions
IE 6 users won't see the transparent background if the hack is not applied
Stephen C. CoxMarketingMake discount offers
Josephin TanAdvertisingGive bonuses
Joyce MingMarketingNew designs
James A. PentelMarketingBetter Packaging
Important!
Make sure the image is relevant to the table's contents
Pros
Very easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives outstanding impression on the viewer
Cons
Needs hack to get the background work in IE 6, needs images
Play With
Background images, transparent PNGs, typography, colors, icons

10. Cell Background

You can apply background-image to the cells and achieve a consistent look. Say you have at least half an hour to spare and you want something that's not too bland. Start your Photoshop and make 1 pixel width gradients, and set them as background-image of all cells. You'll end up with a gradient style table:

EmployeeDivisionSuggestionsRating
Give background color to the table cells to achieve seamless transition
Stephen C. CoxMarketingMake discount offers3/10
Josephin TanAdvertisingGive bonuses5/10
Joyce MingMarketingNew designs8/10
James A. PentelMarketingBetter Packaging8/10

Similarly, pick a pattern and set it as background-image and you'll end up with a pattern-styled-table:

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
NationCapitalLanguageUnique
JapanTokyoJapaneseKarate
South KoreaSeoulKoreanGinseng
ChinaBeijingMandarinKung-Fu
IndonesiaJakartaIndonesianBatik
Important!
Make sure the text stands out against the background
Pros
Easy to style, not too bland
Cons
Uses images, patterns and gradients might distract reading
Play With
Color scheme, patterns, typography, borders, backgrounds, gradients, icons

Final Words

I know I barely scratched the surface with this article, so grab the source and play around. Feel free to post your favourite table designs, especially if it's something I missed out. Over to you.

About the author

R.Christie is studying information systems at college. He viciously juggles activities from college, web design, programming, church, to sport activities. You can say hello to him via e-mail.

Editor's note

This post is one of the finalists of our guest author contest. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we'll analyze their popularity, users activity, quality of backlinks, traffic and further data.

Some contributors with just a single posting.

    Post Rating
    1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.88 out of 5)
    Loading ... Loading ...

    Tags: , ,

    Advertising
    1. 251
      Nick
      July 13th, 2009 5:32 pm

      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.

    2. 252
      SohoInteractive
      July 19th, 2009 5:07 pm

      Great collection
      Thanks you
      F.

    3. 253
      David J. Heinrich
      July 31st, 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.

    4. 254
      government subcontractor
      August 19th, 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

    5. 255
      DJ Dude
      September 14th, 2009 12:17 am

      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.

    6. 256
      Jack
      October 10th, 2009 3:52 am

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

    7. 257
      Matt
      October 10th, 2009 5:50 am

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

    8. 258
      Si
      October 11th, 2009 4:06 pm

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

    9. 259
      Sam
      October 12th, 2009 9:10 pm

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

    10. 260
      Sven Lennartz
      October 12th, 2009 11:37 pm

      Sorry folks. Vitaly just fixed it.

    11. 261
      tonier
      October 13th, 2009 8:51 pm

      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 …

    12. 262
      Mike
      October 15th, 2009 4:33 pm

      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.

    13. 263
      siiniqi
      October 20th, 2009 12:46 am

      very good article keep it up.

    14. 264
      Nathan
      October 22nd, 2009 2:51 pm

      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.

    15. 265
      Robin
      October 23rd, 2009 11:56 am

      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

    16. 266
      Usman Arshad
      October 25th, 2009 10:04 am

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

    17. 267
      klickjobs
      October 27th, 2009 2:13 am

      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

    18. 268
      x_maras
      October 27th, 2009 5:32 pm

      These are amazing!!!!

      Thank you!

    19. 269
      killer_mentat
      October 28th, 2009 3:43 pm

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

      nice tables.

    20. 270
      Chris Perabo
      November 10th, 2009 4:50 am

      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.

    21. 271
      Quique
      November 13th, 2009 3:31 am

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

      thanks for all


    1. 00

      There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

    Leave a Comment

    Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



    Advertisement Advertise with us!
    Join in Smashing Forum
    • Re: Correct way to learn PHP

      Start off by reading all the 15 parts of PHP 101 on Devzone.

    • Re: Using Tutorials?

      I say you're okay. I wouldn't straight up jack someone else's design and present it as my own, even if it was a tutorial, but it's certainly acceptable to learn some…

    • Correct way to learn PHP

      So, I'm a designer but I wanna expand my abilities and learn PHP, to be more exact I wanna learn CI - Codeigniter!

    • I wanna make comics!

      Hello,I'm designer but I've never involved in vector painting so I need your help

    • Re: Twitter

      @gatorwebdesignShould tweet something really...

    Post your job