Veerle's blog

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.

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

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

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.

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.

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.

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.

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.

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.