You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Aug 20

A CSS styled table version 2

2007 at 02.12 pm posted by Veerle Pieters

In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

The XHTML

If you've ever read my first article, you might remember that I suggested you to read Roger's article 'Bring on the tables'. I can't explain it any more profound than how he does. However, I'll give you a short overview of what to keep in mind when you are coding a table with accessibility in mind. Here's my short list:

  • Make sure to use the th elements for the headers in combination with the scope attribute
  • Add a caption to your table, especially when there is more then 1 table on the same page
  • Use the summary attribure in the table element to describe the content of the table
  • Divide your table into sections by grouping table rows using the thead, tfoot and tbody element if needed

A CSS styled table version 2

Why use table headers and scope?

It gives you 2 advantages. It makes the table more accessible for people using a screen reader. Secondly, it makes it easier to style with CSS. You can give all th elements another styling that sets it appart from all other cells which are using the td element. Adding the scope attribute will help people with screen readers to understand the table better. We easily make the connection between the headers and the data cells, but people using screen readers can't if there are 2 kind of headers: one referring to a row and one referring to a column. We use the scope attribute to explain how the headers work and how they are connected with the data cells.

  1. <table>
  2. <tr>
  3. <td></td>
  4. <th scope="col">Webhosting Home</th>
  5. <th scope="col">Webhosting Home Plus</th>
  6. </tr>
  7. <tr>
  8. <th scope="row">Data usage</th>
  9. <td>1 GB per month</td>
  10. <td>2 GB per month</td>
  11. </tr>
  12. </table>
When to use the abbr attribute in headers

You can go an extra mile by using the abbr attribute as well. It's certainly recommended in case the headers are rather long.

  1. <table>
  2. <tr>
  3. <td></td>
  4. <th scope="col" abbr="Home">Webhosting Home for limited usage</th>
  5. <th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
  6. </tr>
  7. ...
  8. </table>
Why add a caption?

It provides a short description of the table. This information is valuable for people using a screen reader. It's immediately clear what the table is about.

  1. <table>
  2. <caption>Company X webhosting products overview</caption>
  3. ...
  4. </table>
Why add summary?

Reading a table for people using a screen reader takes a lot of patience and sometimes a caption doesn't give them enough information but only a hint. Help them by giving a description upfront before they delve into the data. It'll save them a lot of time. A summary can help these people far more by the extra information they read.

  1. <table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
  2. <caption>Company X webhosting products overview</caption>
  3. ...
  4. </table>

The CSS

Time to talk about style and color. I have 2 examples to show:

A CSS styled table version 2

Styling the table cells

In the CSS below I've highlited the styling for the borders. The border-collapse property is set to collapse so the cells have no cellspacing.

  1. table {
  2. width:90%;
  3. border-top:1px solid #e5eff8;
  4. border-right:1px solid #e5eff8;
  5. margin:1em auto;
  6. border-collapse:collapse;
  7. }
  8. td {
  9. color:#678197;
  10. border-bottom:1px solid #e5eff8;
  11. border-left:1px solid #e5eff8;
  12. padding:.3em 1em;
  13. text-align:center;
  14. }
Styling the headers

In the CSS code below you'll see that I've been using a class to style the alternating rows, but you can always use a simple javascript in case you don't want to add these extra classes in the code and if you want to keep your code extra extra clean. I've also added a class for the 1st column since this one has yet another styling, also with an alternating background effect.

CSS for example 1
  1. tr.odd td {
  2. background:#f7fbff
  3. }
  4. tr.odd .column1 {
  5. background:#f4f9fe;
  6. }
  7. .column1 {
  8. background:#f9fcfe;
  9. }
CSS for example 2
  1. tr.odd td,
  2. tr.odd .column1 {
  3. background:#f4f9fe url(images/background.gif) no-repeat;
  4. }
  5. .column1 {
  6. background:#f9fcfe;
  7. }
Styling the thead and tfoot elements

I'm using a different styling for the headers at the top of the table:

  1. thead th {
  2. background:#f4f9fe;
  3. text-align:center;
  4. font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
  5. color:#66a3d3;
  6. }

For the styling at the bottom of the table, I've added a strong element for the titles and em element for the prices:

  1. tfoot th {
  2. background:#f4f9fe;
  3. text-align:center;
  4. }

Here is the styling for the strong element which is for the 'actual' headers:

  1. tfoot th strong {
  2. font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
  3. margin:.5em .5em .5em 0;
  4. color:#66a3d3;
  5. }

This is for the prices which are styled via the em element:

  1. tfoot th em {
  2. color:#f03b58;
  3. font-weight: bold;
  4. font-size: 1.1em;
  5. font-style: normal;
  6. }

Creation of the background image

This is done by creating a document of 25 by 600 pixels in Photoshop. Create a new layer with a subtle vertical gradient. Select a soft blue as the background color and a lighter blue for foregrond color, this is the same color that will be used as background color in the CSS. When the cell expands vertically it'll be filled with this color. Select the gradient tool and drag a vertical line from bottom upwards to the top while holding down the shift key.

Create another new layer, select the pencil tool and make sure it's set to 1 pixel thickness. Draw a horizontal line starting at the top left corner, holding down shift while dragging horizontally to the right corner. Do the same for the vertical line: starting at the top left corner, holding down shift while dragging vertically to the botton left corner.

There you have it. Hope you enjoyed this tutorial and learned some valuable things :)


74served

gravatar

1

permalink this comment Ben Mon Aug 20, 2007 at 02.38 pm

Great post, thanks!


gravatar

2

permalink this comment Mats Lindblad Mon Aug 20, 2007 at 03.00 pm

Might I suggest setting border-spacing to 0 as well on the table, FF uses it but I think that border-collapse: collapse resets it, but you never know ... ;)

And wouldn’t it be nice if you could use abbr in the other direction as well, for tight tables that require short headers (calendars). But I guess you could set the title instead.

Nice article. :)


gravatar

3

permalink this comment Sam Brown Mon Aug 20, 2007 at 03.22 pm

A great tutorial Veerle, never thought to use the <code>scope</code> attribute before, thanks for the insight.


gravatar

4

permalink this comment Kisan Mon Aug 20, 2007 at 03.30 pm

Excellent Article!

I never used these tags in fear of making the HTML code heavy in file size.

But now after reading this article it makes sense.

In future all my tables will have these tags.

Thanks for this wonderful article.


gravatar

5

permalink this comment Sean Foushee Mon Aug 20, 2007 at 03.41 pm

Tables have been one element I’ve largely ignored in recent years, except for cases when I had to display specific tabular data, but even then my use of the table element has been rather antiquated. Thanks for the refresher and explanation on how to more properly utilize a table.


gravatar

6

permalink this comment Lola Mon Aug 20, 2007 at 04.40 pm

impressive.


gravatar

7

permalink this comment vanni Mon Aug 20, 2007 at 05.02 pm

Great tutorial and very timely as i wish to implement a table for holding our list of members, email, telephone, addresses etc. Your tutorial is perfect for what i need to do. In my case I want the table to be no wider than 500px.  I suppose that you example can be adjusted for such a max width?

Wish; It would be neat to have a tool that could create the css by just graphically drawing out a table! i.e. i am thinking of a Table-Creation Widget for CSSEdit ;-)


gravatar

8

permalink this comment Jen Mon Aug 20, 2007 at 05.40 pm

Thank you for the info, Veerle. You truly are an inspiration. I am hoping to have my own table up and running shortly.


gravatar

9

permalink this comment Arjan Eising Mon Aug 20, 2007 at 05.41 pm

Nice article, this is exactly the way tables need to be used.

I have a small addition. For repeated word groups inside the table it is better to use the

abbr

element, with in the

title

attribute the word group and between the start and end tag and abbreviation. This is better since it is very annoying for screen reader users when they hear the same thing over and over again.

It is also possible with <abbr title=“Cascading Style Sheets”>CSS</abbr> (in modern browsers, so no IE6) to display the contents of the

title

attribute, so people without screen reader see that instead of the abbreviation.


gravatar

10

permalink this comment Nate Koechley Mon Aug 20, 2007 at 05.48 pm

Nice post.

I have one addition: I’ve found it useful and important to include the headers attribute in TDs with one (or more) values pointing to the cell’s relevant TH ids.

<tr>
<th scope="col">Store</th>
<th id="price" scope="col">Price</th>
</tr>
<tr>
<th id="store1" scope="row">Store 1<th>
<td headers="price store1">$9.99</td>
</tr>

For example, look at how these attributes are used on Yahoo! Tech merchant-compare pages:
http://tech.yahoo.com/pp/samsung-sc-x105l/1991860013

Thanks,
Nate


gravatar

11

permalink this comment Jon-Michael Mon Aug 20, 2007 at 05.56 pm

Here’s a simpler row-striping JavaScript function:

function stripe() {
if (!document.getElementsByTagName(‘tr’)) return;
var tr = document.getElementsByTagName(‘tr’);
for (var i = 0; i < tr.length; i = i + 2) {
tr<i>.setAttribute(‘class’, ‘odd’);
}
}
window.onload = stripe;

It looks like the primes were converted to quotation marks, so those will need to be changed.


gravatar

12

permalink this comment Jacob Mon Aug 20, 2007 at 06.39 pm

Good example of a table. I like the one with no background image for some reason.

Seriously i didn’t see any difference between the two at first :-)


gravatar

13

permalink this comment Peter Gasston Mon Aug 20, 2007 at 06.57 pm

If you’re into graceful enhancement/degradation, you could use the CSS3 nth-child pseudo-class to stripe your tables;

tr:nth-child(odd) { background-color: blue; }

Only Konqueror supports it at the moment, but one day your table would look nice for everyone ;)


gravatar

14

permalink this comment Gavin the photographer Mon Aug 20, 2007 at 08.29 pm

You did it again. Now I have to change my nasty habits to make way for superior and cleaner code. 

You rock.


gravatar

15

permalink this comment 74designs Mon Aug 20, 2007 at 08.50 pm

I had not heard of <table summary=”“> before.  Fantastic article.


gravatar

16

permalink this comment David G. Paul Mon Aug 20, 2007 at 09.50 pm

took a while to get to this page, think it might be suffering from the “digg effect” - still, the article was worth the wait ;)


gravatar

17

permalink this comment Mats Lindblad Mon Aug 20, 2007 at 10.20 pm

I have been doing battle with a nasty table today and I can add one observation and that is that IE and FF handles backgrounds on <<col >:s different.
IE adds the background to every cell while Firefox adds it to the “column” which prevented me from adding a background with a rounded bottom border, it looked really ugly.

And don’t get me started on the difference in how they handle width. In ALL browsers!


gravatar

18

permalink this comment Simon Gow Mon Aug 20, 2007 at 10.50 pm

Mmmm nice, I didn’t know about the abbr tags, are they in the spec or will this thing not validate?


gravatar

19

permalink this comment Mathew B. Tue Aug 21, 2007 at 12.06 am

Excellent post - thanks to your Digg front page I had a hefty wait for the page to load but it was worth it ;)


gravatar

20

permalink this comment Deaf Musician Tue Aug 21, 2007 at 12.39 am

Nate Koechley in #10 makes a very good point, as it is necessary for some readers to have that kind of information. Also, I don’t know why you need “border-top” “border-right” for table and “border-left” and “border-bottom” for td. This isn’t necessary, just define “border: 1px solid #e5eff8;” “border: collapse”, this way it doesn’t do “multiple overlapping” borders. Regardless, GREAT article, Veerle!


gravatar

21

permalink this comment Chris Coyier Tue Aug 21, 2007 at 02.39 am

Beautiful tables. The use of scope is spot-on. For the div-inclined, it is possible to put divs inside tables, just make sure they are inside an actual cell not somewhere randomly between your table tags =)


gravatar

22

permalink this comment Michael Newton Tue Aug 21, 2007 at 03.23 am

Rather than adding a class for the first column, wouldn’t styling a

col

element work as well? I’m not sure about cross-browser compatibility as I’m fortunate enough to work in a Firefox-only shop making intranet stuff.

I saw this technique used by Jonathan Snook long ago at 24ways and have made use of it a few times since.


gravatar

23

permalink this comment raymond lee quijano Tue Aug 21, 2007 at 03.39 am

i’ve been doing this same style as yours but this article really improved my insight on css styling, especially when using tables. good job.


gravatar

24

permalink this comment David Kypuros Tue Aug 21, 2007 at 04.06 am

Very clean way to construct the CSS. This site keeps me free from the quick and dirty CSS way!

Keep up the good work. You’re helping a ton of people out there…


gravatar

25

permalink this comment Jermayn Tue Aug 21, 2007 at 04.59 am

Good points and while nothing new to most of us, very useful for people who are still learning the art of css.


gravatar

26

permalink this comment Abdullah Tue Aug 21, 2007 at 06.43 am

Great article, I never wanted to use these tables since I moved to div based designing. But this article shows that table can also be beautiful.


gravatar

27

permalink this comment Gustavs Tue Aug 21, 2007 at 06.53 am

Great article.

By the way, you use textmate, right? What’s that theme you are using?


gravatar

28

permalink this comment melon Tue Aug 21, 2007 at 09.54 am

Very nice post thank you. I think everyone should evaluate your ideas when using tables.


gravatar

29

permalink this comment Veerle Tue Aug 21, 2007 at 09.55 am

Thanks for taking the time to comment and for the feedback.

Arjan Eising said:

For repeated word groups inside the table it is better to use the abbr element, within the title attribute of the word group and between the start and end tag and abbreviation.

I’m afraid you lost me here :) I usually use abbr for abbreviations like CSS for instance the way you describe it, with a title attribute, but I don’t know how to apply this here in the table? Where do you place it and how?

Nate Koechley said:

I have one addition: I’ve found it useful and important to include the headers attribute in TDs with one (or more) values pointing to the cell’s relevant TH ids.

That’s a nice tip indeed for complex or irregular tables when there are data cells that need to be linked to more than two header cells, and the scope attribute is insufficient. Roger talks about this in his article as well and this makes sense.

Simon Gow said:

Mmmm nice, I didn’t know about the abbr tags, are they in the spec or will this thing not validate?

Yes it will and it is an official W3C attribute.

Deaf Musician said:

I don’t know why you need “border-top” “border-right” for table and “border-left” and “border-bottom” for td. This isn’t necessary, just define ”border: 1px solid #e5eff8;” “border: collapse”, this way it doesn’t do ”multiple overlapping” borders.

Thanks, didn’t think of that indeed. I usually leave the cellspacing attribute with value of 0 in the table element. I just added this border-collapse property at the end and forgot about what it ‘actually’ does :) It makes sense what you’re saying so maybe I should style my tables this way from now on, if all borders have the exact same color.

Chris Coyier said:

For the div-inclined, it is possible to put divs inside tables, just make sure they are inside an actual cell not somewhere randomly between your table tags =)

Hm, I wouldn’t call this very semantic. It’s adding unnecessary code. Why would you want to do that? Just give the ‘id’ to the td element and style that instead of adding a div. I don’t see the purpose really. I also strongly believe that tables need to be used what they are meant for and that is for tabular data. As soon as you are thinking in terms of pure layout you need to use divs instead of using tables and you certainly don’t mix the 2 like this article is suggesting. This is not the way, you could as well stick to old school coding then.

Michael Newton said:

Rather than adding a class for the first column, wouldn’t styling a col element work as well?

I assume you mean to use an attribute selector? Also, I think you probably mean the scope attribute with value ‘row’. The headers in the first column have a row value for the scope (not col). So the CSS would look like this:

tr.odd th[scope=row] {
background:#f4f9fe;
}
th[scope=row] {
background:#f9fcfe;
}

Gustavs said:

By the way, you use textmate, right? What’s that theme you are using?

Nope that’s not TextMate but CSSEdit.


gravatar

30

permalink this comment Arjan Eising Tue Aug 21, 2007 at 10.25 am

I mean that if you use a repeated word or word group that might be annoying, you can use the technique described in my previous comment.

So if you use the word ‘available’ in 10 columns for your hosting company, it is very annoying to hear that 10 times.


gravatar

31

permalink this comment Veerle Tue Aug 21, 2007 at 11.21 am

Arjan Eising said:

I mean that if you use a repeated word or word group that might be annoying, you can use the technique described in my previous comment.

So if you use the word ‘available’ in 10 columns for your hosting company, it is very annoying to hear that 10 times.

I get the repeating part and ‘why’ etc., but my question was: how do I apply this? how do you put this in practice? Can you give me a code example so I know what you mean? Thank you :)


gravatar

32

permalink this comment lex hardy Tue Aug 21, 2007 at 11.31 am

Hi Veerle,

I’ve got a question. Why don’t you use the *{margin: 0; padding: 0} in your CSS code?

Instead you had to type in every single element! Is there a reason for that?

Just curious. The table looks amazing by the way. Keep up the fantastic article. Great learning material.

Sincerely,
Lex


gravatar

33

permalink this comment lex hardy Tue Aug 21, 2007 at 11.43 am

I think Arjan means the following:

Shortening the headers: the abbr attribute: When a screen reader encounters a table, it can announce the associated header (or headers) before each data cell. If you have long headers, hearing them repeated over and over can get tedious. By using the abbr attribute to provide an abbreviated version of any long headers, you give screen readers something that they can use instead of the text in the header itself. Using the abbr attribute is optional, and most of the time your headers will (and probably should) be pretty short anyway.

If the example table is modified slightly, to make the headers longer, the abbr attribute could be used like this:

<table summary=“The number of employees and the foundation year of some imaginary companies.”>
<caption>Table 1: Company data</caption>
<tr>
<th abbr=“Company”>Company Name</th>
<th abbr=“Employees”>Number of Employees</th>
<th abbr=“Founded”>Foundation Year</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

full article is at: http://www.456bereastreet.com/archive/200410/bring_on_the_tables/


gravatar

34

permalink this comment Arjan Eising Tue Aug 21, 2007 at 12.13 pm

Lex got it quite right. In the first comment I had some confusion while writing between the abbr element (which also exists) and the abbr attribute for the td and th elements. Sorry for the confusion, Veerle.


gravatar

35

permalink this comment Veerle Tue Aug 21, 2007 at 01.00 pm

lex hardy said:

Why don’t you use the *{margin: 0; padding: 0} in your CSS code? Instead you had to type in every single element! Is there a reason for that?

I prefer not to use the universal selector to reset margins and paddings. Instead I sum up certain elements (see first style in my stylesheet) that I think need to be reset. I’m just more selective. In case of interest, more info about this topic can be found on Eric Meyer’s site.  So it’s actually not like you mention here that I have to repeat this in every single element.

Arjan Eising said:

Lex got it quite right. In the first comment I had some confusion while writing between the abbr element (which also exists) and the abbr attribute for the td and th elements. Sorry for the confusion, Veerle.

I have been using the abbr attribute in my table the exact same way Lex is showing here and I have been explaining this in my article like Lex is quoting (but not that extended). I’m still not getting what the point or difference is here. If you are referring to the naming of the products in my table: ‘Home’, ‘Home Plus’, ‘Business’ and ‘Business Plus’, these are 4 different products which need to be read like that in screen readers, these are the 4 different packages. Some words are the same but they are product names so I can’t change that or I give the wrong info here :-/


gravatar

36

permalink this comment Alex Tue Aug 21, 2007 at 04.46 pm

Thanks so much for this. I thought your original CSS styled tables was a great help. I’ve always struggled with coming up with ways to spice them up. Your first example really inspired me to work at it, and this will help even more.


gravatar

37

permalink this comment Jermayn Wed Aug 22, 2007 at 03.26 am

I saw in the comments people talking about not using tables since moving over to div tags, a while ago I wrote an article which may help you understand why you can still use them for tabular data which they are designed for…


gravatar

38

permalink this comment Tanny O'Haley Wed Aug 22, 2007 at 06.17 am

Nice article. I was wondering why a class was added to style the headings in the body rows. Couldn’t you have used:

/* Even row headings */
tbody tr th{
...
}
/* Odd row headings */
tbody tr.odd th {
...
}

That would reduce the size of a large table by not having to include

class=“column1”

on every

th

element in the body of the table.


gravatar

39

permalink this comment Peter Wed Aug 22, 2007 at 07.57 am

IMHO the summary should have also brief info about the table’s layout to help blind people understand its structure.


gravatar

40

permalink this comment Veerle Wed Aug 22, 2007 at 09.42 am

Tanny O’Haley said:

I was wondering why a class was added to style the headings in the body rows…

That’s smart CSS indeed, thanks for this. I just didn’t really give any extra thought to avoid this class. It was like I was convinced this was the ‘only’ way :) Michael Newton was suggesting to use an attribute selector th[scope=row] which could work also, but I like your version better, because it involves less complex CSS to achieve the same result.

Peter said:

IMHO the summary should have also brief info about the table’s layout to help blind people understand its structure.

Do you mean something like ‘this table contains 7 rows and 5 columns’? If so, wouldn’t this be a bit overkill? :) I’m just thinking of its purpose or added value if you add this info. Would a blind person who is interested in the content of the table decide not to proceed to read the table after he hears that the table is a rather big one? Would he base his decision on this? Is this valuable info for them? I just wonder.


gravatar

41

permalink this comment Peter Thu Aug 23, 2007 at 11.33 am

Veerle said:

Do you mean something like ‘this table contains 7 rows and 5 columns’? If so, wouldn’t this be a bit overkill? :) I’m just thinking of its purpose or added value if you add this info. Would a blind person who is interested in the content of the table decide not to proceed to read the table after he hears that the table is a rather big one? Would he base his decision on this? Is this valuable info for them? I just wonder.

I guess this is highly debatable (as so many aspects of accessibility) and perhaps not really required for simple tables, but when you get into more complex tables with grouped columns then I think the extended summary should be used.

For example: “Table has three columns. First column (COLUMN NAME) is divided into two sub-columns. First sub-column (NAME) contains ... etc…”

I’ve actually had conversations with few blind web users about that, some time ago. I didn’t get 100% yes (it helps) or no (it disturbs) on the subject, but the overall rating was 4 yes / 2 no / 1 no opinion - here however the exact answer was: I skip tables, if I really need info from them I ask my wife (not blind) to find it for me [from the table].

I always try to simplify tables, so I don’t need to write that extended summary.


gravatar

42

permalink this comment David Thu Aug 23, 2007 at 05.56 pm

Thats a vry nice table. I like the icons. Using XSLT you are able to apply odd/even to your TRs and TDs without any server logic or HTML botching. You can also use some CSS pseudo selectors that are only supported by Konqueror to stripe your tables. http://dev.l-c-n.com/CSS3-selectors/browser-support.php is a good reference for that.


gravatar

43

permalink this comment Mathew B. Fri Aug 24, 2007 at 06.39 pm

Another wonderful article, thanks a lot.


gravatar

44

permalink this comment Thomas Fri Aug 24, 2007 at 08.01 pm

Nice article.  The one caveat I’d add is that time and again having borders between cells has been shown to hinder reading a table.  Pretty graphical treatments does not always equal good usability.  When you have borders between cells, and particularly between rows, the eye has trouble tracking across with the eye trying to scan across the contents of the row and continually being pulled down to the border and then back up again.


gravatar

45

permalink this comment Veerle Fri Aug 24, 2007 at 08.32 pm

Thomas said:

Nice article. The one caveat I’d add is that time and again having borders between cells has been shown to hinder reading a table.  Pretty graphical treatments does not always equal good usability.

Would love to see your source for that. Visual elements helps bringing more focus in my example, borders are not making it harder. Making things ugly does not always equal good usability too.


gravatar

46

permalink this comment André Sun Aug 26, 2007 at 06.29 pm

This is a nice work!!!! This will help me soo much!!!
Thanks Veerle


gravatar

47

permalink this comment Blizzo Mon Aug 27, 2007 at 02.16 pm

I have been using this approach for some time.  I learned it by reverse engineering stylesheets on the CSS Table Gallery.  There are almost a hundred styles there, similar to CSS Zen Garden, it’s different stylesheets applied to one table.


gravatar

48

permalink this comment Christian Mon Aug 27, 2007 at 06.04 pm

I’ve been following these principles for a long time and should’ve written an article on it but you did a great job. Hopefully all web developers read this.


gravatar

49

permalink this comment Tesana Tue Aug 28, 2007 at 12.55 am

Just thought I’d mention that I found your original table post through Google about a month ago and it helped so much I have subscribed to your feed. Thanks for everything.


gravatar

50

permalink this comment Montoya Tue Aug 28, 2007 at 02.12 pm

Putting borders on table cells makes the table harder to read??? That’s news to me! Would someone please provide proof, because it sounds preposterous.


gravatar

51

permalink this comment Christian Tue Aug 28, 2007 at 08.18 pm

The borders are there to help make sure you are still looking at the same line of information as your eyes move down the row.


gravatar

52

permalink this comment docker Wed Aug 29, 2007 at 09.25 am

Great stuff, good help…
Thank you!


gravatar

53

permalink this comment Steve Wed Aug 29, 2007 at 02.17 pm

very nice post. I’ve been trying to persuade some of the div only front end devs I’ve worked with about the power of tables, think this has to go over to them =]


gravatar

54

permalink this comment Christian Wed Aug 29, 2007 at 05.30 pm

“I’ve been trying to persuade some of the div only front end devs I’ve worked with about the power of tables”

Yes, it’s still appropriate, and always has been, to use tables when presenting tabular data.


gravatar

55

permalink this comment Thomas Wed Aug 29, 2007 at 05.59 pm

“Would love to see your source for that. Visual elements helps bringing more focus in my example, borders are not making it harder. Making things ugly does not always equal good usability too.”

Well, nobody said anything about making things ugly. You can do both pretty and usable.

It has to do with the gestalt rules of perception: figure and ground.  The background of the cell is the ground. The text and the borders appear as figure.  They eye has no problem tracking across the figure as compared to the ground.  Adding the line above and below the content of the table cells the eye flits, if you will, from the figure of the text down to the border back up to the text, back and forth as the eye tracks from left to right.  The visual element of the border actually brings less focus to your content though it may bring more focus to the table as a whole.

It’s usability 101 type stuff. You can look it up yourself, it’s out there.  Or you can ignore it.  If I come across it I’ll post the citation or URL. You’re a great artist I just wish you wouldn’t try to pass off artistic flair for usability.  They’re not mutually exclusive but they’re certainly not the same thing either.


gravatar

56

permalink this comment Thomas Wed Aug 29, 2007 at 06.16 pm

Here’s one place you can look regarding borders on table rows and cells: Edward Tufte’s “Envisioning Information.”  The chapter on Layering and Separation.


gravatar

57

permalink this comment Christian Wed Aug 29, 2007 at 06.35 pm

Thomas said:

They eye has no problem tracking across the figure as compared to the ground.

When I try to read a table that has no borders I’m always having to double and triple check to make sure that the cell I’m looking at really pertains to its relevant header cell that I think it might pertain to (following my explanation?). Maybe I’m the only person on the planet weak enough to have to do that.


gravatar

58

permalink this comment Veerle Wed Aug 29, 2007 at 07.22 pm

Thomas said:

Well, nobody said anything about making things ugly. You can do both pretty and usable.

Don’t backtrack on what said earlier here, remember?

Pretty graphical treatments does not always equal good usability

You are saying that graphical elements (border) needs to be removed so that it more easy to see. I’m certain that my example is clear and I assure you that I kept usability in mind. I didn’t go overboard by designing just to make it pretty like I don’t have a clue. It’s all well balanced.

The visual element of the border actually brings less focus to your content though it may bring more focus to the table as a whole.

A table without borders is much harder to grasp, just remove styling and try to interpret the data. A border makes it easier to associate the data in there and you’ll read it much faster too because you don’t need to concentrate that hard. The border serves a guide if you will. Using fancy terms as “gestalt rules of perception: figure and ground” doesn’t prove that. I try to keeps things simple here, the dress to impress rules don’t apply here.

It’s usability 101 type stuff. You can look it up yourself, it’s out there.

If it is indeed usability 101 there should be a test that proves you right. But no,  I need to search for it when you bring it up. Come on, when you claim something back it up with real proof and not some lame excuse that it is out there. With proof I don’t mean bringing a book forward by Edward Tufte and not showing what it says. An example is Jakob Nielsen advice, if you would do everything what he says, every link out there is red and blue and everything is text.  It’s true that you got to keep certain things in mind but it doesn’t mean you got to take the advice to the extreme.

You’re a great artist I just wish you wouldn’t try to pass off artistic flair for usability.

So you are basically saying that I should stick to playing with my pencils and leave the usability to serious boys like you. Come on, do actually have an idea how pompous that makes you sound? It comes down to one thing, back up your claims with *real* proof. Should be no problem since it’s usability 101. From all the people here that saw the table nobody except you said it’s bad. According to you it’s so obvious that everybody knows about it since they are basic principles. Well I guess that makes us all dumb then since we don’t grasp basic rules.


gravatar

59

permalink this comment Christian Wed Aug 29, 2007 at 07.37 pm

Veerle, I think this guy is just a troll.


gravatar

60

permalink this comment Thomas Wed Aug 29, 2007 at 07.49 pm

Okay, first off I didn’t backtrack on anything. I said pretty does not always equal good usability.  I didn’t say it never equals good usability. Big difference.  Good design, (meaning both aesthetically pleasing and usable), is a balance of both disciplines.

According to you it’s so obvious that everybody knows about it since they are basic principles. Well I guess that makes us all dumb then since we don’t grasp basic rules.

I never claimed that. Most usability is stuff that is not obvious. But that’s exactly why graphic designers do not equal usability engineers and usually usability engineers don’t equal graphic designers. However nothing I said excludes the possibility that a person can do both.  You’re assuming too much in my comments and kind of jumped down my throat from the get-go.

I provided you with and explanation and a place to look up the information, (which is more than you’ve provided for your claim that lines make it easier).  Just because it isn’t a link on the web doesn’t invalidate it. If it’s too hard for you to look up then don’t.  I could care less. I just know now A) never challenge your design assumptions and B) only read your blog for graphical information.

I strongly recommend the book though. Most designers I know love his work.


gravatar

61

permalink this comment Christian Wed Aug 29, 2007 at 08.08 pm

In post #57 I explained why lines make it easier for me.


gravatar

62

permalink this comment Veerle Wed Aug 29, 2007 at 08.27 pm

Thomas said:

Good design, (meaning both aesthetically pleasing and usable), is a balance of both disciplines.

That’s exactly what I did.

I provided you with and explanation and a place to look up the information, (which is more than you’ve provided for your claim that lines make it easier).  Just because it isn’t a link on the web doesn’t invalidate it. If it’s too hard for you to look up then don’t.

Read the comments since there is already somebody saying exactly the same as me. Furthermore all the visitors here are also not confirming what you are saying. In my book if you come here to show that you know your stuff you provide me with proof of that or show me some serious work you did so I can see you are knowledgeable, otherwise shut up to put it bluntly. Just read all my posts and you’ll see that I agree when someone brings new info and proof of a better technique. It’s you who claims something so it’s on you to prove me wrong. If you actually read the comments here you would have seen that I am not alone here in challenging your claims.

I just know now A) never challenge your design assumptions and B) only read your blog for graphical information.

You try to make me sound like a “know it better kind of person and doesn’t want critique” when in fact I’m just eager to learn new things. When somebody points something out, I like to see something more then just mentioning a book. If you don’t want to bother and go the extra mile by educating everybody here it’s better not to comment at all.


gravatar

63

permalink this comment Gerd-E. Wed Aug 29, 2007 at 11.42 pm

Hi,

it’s a very helpful Website for a newcomer of css. The toturials are comprehensible. It’s a great work. Thank’s ;-)


gravatar

64

permalink this comment Setomidor Thu Aug 30, 2007 at 09.03 am

Nice article :) I only came here for some design ideas, but got much more.

The only thing I’d like to add is that the gradient background image could be reduced to 1 px width, and then repeated using “background-repeat: repeat-x;”. This way, you reduce the traffic for that particular image with 99.8%!


gravatar

65

permalink this comment Veerle Thu Aug 30, 2007 at 09.41 am

Setomidor said:

The only thing I’d like to add is that the gradient background image could be reduced to 1 px width, and then repeated using “background-repeat: repeat-x;”. This way, you reduce the traffic for that particular image with 99.8%!

You are right, that would work indeed if I didn’t use a white vertical line of 1 pixel on the left of the gradient as a highlight. Because of this small detail I can’t repeat it horizontally. You could of course decide to leave that detail out so you can repeat it and and keep it much lighter as you mention here. In the end I would choose to go with version 1, have no background image but just a solid background color. I like the result better and it’s lighter :) It’s of course a personal choice.


gravatar

66

permalink this comment greengnn Thu Aug 30, 2007 at 07.39 pm

[url=”#“title=“Bestel Web Hosting Home” ]
order now
[/url]

Very good,but, this code I think that using <button> is better. Like this:

<button title=“Bestel Web Hosting Home” onclick=”“>
order now
</button>


gravatar

67

permalink this comment Andrew Thu Aug 30, 2007 at 11.51 pm

Adding constructive criticism is one thing, but picking apart minor stylistic details is completely unnecessary.

The purpose of this blog and the examples shown is to give people an idea of what can be done using accessible markup and stylesheets.

I think Thomas missed the point.


gravatar

68

permalink this comment Veerle Fri Aug 31, 2007 at 09.29 am

greengnn said:

Very good, but, this code I think that using <button> is better

You might indeed consider this, if the site you are working on needs a ton of buttons and you need to make all one of them in Photoshop. This can become rather impractical and then the button element would be a good choice. You can still use styling like background images to achieve something attractive. I’ve implemented the button element in a new page without adding any CSS to it yet, but as you can see I need to go through some serious styling to get it right for my example. I wouldn’t go through the effort if I know I’ll only be using this for a few different buttons. I don’t believe it adds extra value towards accessibility either so it’s not worth the extra work in my opinion in this situation.

BTW, you forgot to add the ‘type’ attribute in your code (type=“submit”) and I would also leave out the ‘onclick’ (javascript) handler and just wrap it in a link and add the ‘title’ attribute in the ‘a’ element, like this :

<a href="#" title="Bestel Web Hosting Home"><button type="submit"><img src="images/b-order.gif" alt="order now" width="73" height="21" />Order Now</button></a>

For people who wants to know more about the button element, here is an outstanding article about that. It’s certainly worth the read for the creation of forms.


gravatar

69

permalink this comment andly Mon Sep 3, 2007 at 07.21 pm

Wonderful article!!
Thank you


gravatar

70

permalink this comment Thomas Tue Sep 4, 2007 at 07.17 pm

“The purpose of this blog and the examples shown is to give people an idea of what can be done using accessible markup and stylesheets.

I think Thomas missed the point.”

Not at all.  The graphical treatment is very pretty.  The markup is superb.  The former I mentioned that latter I should have as it is superb.  I was adding a point about other relevant factors, (usability), that were missed in the otherwise very well done and informative post.

I’m happy to leave it alone at this point. As Veerle says, if I’m not willing to go the extra mile to dig up the eye tracking studies then I may as well let sleeping dogs lie.


gravatar

71

permalink this comment besork Wed Sep 5, 2007 at 07.43 am

Thanks for this great tutorial!


gravatar

72

permalink this comment Matt Wed Sep 5, 2007 at 04.44 pm

I used the CSS thanks a lot :)


gravatar

73

permalink this comment Fotis Evangelou Mon Sep 10, 2007 at 06.23 pm

Hi Veerlee, first time posting on your blog, but long time visitor :)

Anyway, I just wanted to say that it is far easier and works on all browsers to do this if you have 1px solid borders on td’s or th’s.

table {border-collapse:collapse;}
table tr td {border:1px solid #ccc;margin:0;padding:2px;}

Works like a charm on all browsers and you don’t need to add top/left border values on the table and bottom/right border values on td/th’s to achieve a 1 pixel border running the whole table.

The key is obviously at the border-collapse property. ;)

Cheers.


gravatar

74

permalink this comment Zaigham Fri Sep 14, 2007 at 11.45 pm

Excellent stuff! Thanks for sharing detailed information on tables, and yeah… tables are looking nice again! :)



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist