Upload
michael-aye-ikhane
View
584
Download
6
Embed Size (px)
Citation preview
Top 10 CSS Table Designs (http://www.smashingmagazine.com/2008/08
/13/top-10-css-table-designs/)
By Guest Author (http://www.smashingmagazine.com/author/guest-author/)
August 13th, 2008Coding
304 Comments (http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/#comments)
By R. Christie
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, theamount 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 tenmost easily implemented CSS table designs so you can style your tables in a zap!
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web
Design (http://shop.smashingmagazine.com/smashing-ebook-series-1-professional-web-design-intl.html) ,242 pages for just $9,90.]
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>
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
1 of 13 18.May.2010 6:01 PM
<!-- 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 (http://www.htmldog.com
/guides/htmlbeginner/tables/) . I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x andSafari. 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(http://media.smashingmagazine.com/cdn_smash/images/express-css-table-design/express-css-table-
design.zip) 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 theperfect 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.
1.
Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we haveto pull them too close, right? Define some space between the cells, crammed up table cells are so much
harder to read.
2.
Treat tables the way you treat content. Tables are read similarly to the way we read text — exceptit’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 graphicaldecoration. Make sure that the style you apply to it makes the content more readable, not the other wayaround.
3.
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 arow. 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.
Employee Salary Bonus Supervisor
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
2 of 13 18.May.2010 6:01 PM
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
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 toomany rows. To counter it we simply add 1 pixel border underneath all td elements:
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
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
ProsVery easy to style, good for simple tables
Constr:hover rules don’t work in IE 6, table can be confusing if it has too many columns
Play withColor 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 whitespaceseparators between columns.
Comedy Adventure Action Children
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
3 of 13 18.May.2010 6:01 PM
Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A 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
ProsEasy to style, good for simple tables
ConsCan not be used if background is not a solid block of color, suitable only for some tables
Play WithColor 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 andthen 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:
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Comedy Adventure Action Children
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
4 of 13 18.May.2010 6:01 PM
Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life
This style is nowadays probably the most used style. The tricky part is actually trying to find the color schemethat 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
ProsEasy to style, flexible for large or small tables
ConsChoosing the perfect color scheme could be tricky
Play withColors 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>
...
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
5 of 13 18.May.2010 6:01 PM
Employee Salary Bonus Supervisor
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Important!Do not put too much contrast on the zebra colors, you can blind your users
ProsThe zebra pattern can help people to scan the table
ConsAdding 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 WithContrasting 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 (http://www.htmldog.com/guides/htmladvanced/tables/) .
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
6 of 13 18.May.2010 6:01 PM
Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug’s Life
Although perhaps more suitable for vertically-oriented table, this zebra-style can also be used for any otherkind of tables.
Important!Do not put too much contrast on the zebra colors, you can blind your viewer
ProsSuitable for all types of tables
ConsChoosing the color scheme could be tricky, need to add colgroup elements
Play WithContrasting 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:
Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
You can also use one-column-emphasis-technique to highlight something important, say the columncontaining 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
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
7 of 13 18.May.2010 6:01 PM
the columns.
ProsVery effective when used in certain kind of tables
ConsThe necessary tr:hover effect does not work in IE, suitable for certain types of tables only
Play withColor 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:
Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Simply play with color scheme, borders, padding, backgrounds, and tr:hover effects of the cells (td and
th). Other alternatives are presented below:
Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
FAVORITE GREAT NICE BAD
Passion of the Bourne Shoot ‘Em Ali
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
8 of 13 18.May.2010 6:01 PM
FAVORITE GREAT NICE BAD
Christ Ultimatum Up
The Big Fish The Mummy Apocalypto Monster
Shawshank
Redemption
Cold
Mountain
Indiana
Jones
Dead or
Alive
Greatest Story
Ever ToldI Am Legend Star Wars Saw 3
Important!Be careful with border-collapse, do not lose the signature border around the table!
ProsGives a royal, authorative aura to a table
ConsUnsuitable for large tables (it loses it’s charm on large tables)
Play WithTypography, 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 upPhotoshop 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:
Company Q1 Q2 Q3 Q4
The above data were fictional and made up, please do not sue me
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
ProsGreat if you want untraditional table, probably the only viable option you have if your website uses
rounded corners heavily
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
9 of 13 18.May.2010 6:01 PM
ConsTakes longer to style, requires images
Play WithColor 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 photorelated 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:
1 * html table tbody td
2 {
3
4 /* IE CSS Filter Hack goes here*/
5
6 }
The table would look like this:
Employee Division Suggestions
IE 6 users won’t see the transparent background if the hack is not applied
Stephen C. Cox Marketing Make discount offers
Josephin Tan Advertising Give bonuses
Joyce Ming Marketing New designs
James A. Pentel Marketing Better Packaging
Important!Make sure the image is relevant to the table’s contents
ProsVery easy to style, delivers unique look, if used correctly the image can serve as a symbol that gives
outstanding impression on the viewer
ConsNeeds hack to get the background work in IE 6, needs images
Play WithBackground images, transparent PNGs, typography, colors, icons
10. Cell Background
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
10 of 13 18.May.2010 6:01 PM
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 widthgradients, and set them as background-image of all cells. You’ll end up with a gradient style table:
Employee Division Suggestions Rating
Give background color to the table cells to achieve seamless transition
Stephen C. Cox Marketing Make discount offers 3/10
Josephin Tan Advertising Give bonuses 5/10
Joyce Ming Marketing New designs 8/10
James A. Pentel Marketing Better Packaging 8/10
Similarly, pick a pattern and set it as background-image and you’ll end up with a pattern-styled-table:
Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
Nation Capital Language Unique
Japan Tokyo Japanese Karate
South Korea Seoul Korean Ginseng
China Beijing Mandarin Kung-Fu
Indonesia Jakarta Indonesian Batik
Important!Make sure the text stands out against the background
ProsEasy to style, not too bland
ConsUses images, patterns and gradients might distract reading
Play With
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
11 of 13 18.May.2010 6:01 PM
5 (Excellent)
4 (Good)
3 (Average)
2 (Not that bad)
1 (Bad)
I don't know
Color scheme, patterns, typography, borders, backgrounds, gradients, icons
Final Words
I know I barely scratched the surface with this article, so grab the source(http://media.smashingmagazine.com/cdn_smash/images/express-css-table-design/express-css-table-
design.zip) and play around. Feel free to post your favourite table designs, especially if it’s something Imissed 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
(mailto:[email protected]) .
Editor’s note
This post is one of the finalists of our guest author contest (http://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/) . Over three weeks selected top-10-lists and discussionarticles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of
backlinks, traffic and further data.
View Results
(javascript:PD_vote853926(1);)
Polldaddy.com (http://polldaddy.com/features-
polls/?source=poll-front)
Guest Author (http://www.smashingmagazine.com/author/guest-author/)
Some contributors with just a single posting.
43
How good is the post "Top 10 Express CSS Table
Designs"?
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
12 of 13 18.May.2010 6:01 PM
Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman (/about)
Top 10 CSS Table Designs - Smashing Magazine http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
13 of 13 18.May.2010 6:01 PM