Anne van Kesteren

Playing with tables

Just for the fun of it (markup can be fun) Arthur and I tried to go to the extreme of HTML table markup, just for the opening times of a local shop (site isn't released yet). Result (15 minutes of work; includes reading at the W3C):

<table summary="De openingstijden van de winkel.">
 <caption>Openingstijden</caption>
 <thead>
  <tr><th scope="col">Dag</th><th scope="col">Tijd</th></tr>
 </thead>
 <tbody>
  <tr><th abbr="Maandag" scope="row" axis="dag">Ma</th><td axis="tijd">13.00-18.00</td></tr>
  <tr><th abbr="Dinsdag" scope="row" axis="dag">Di</th><td axis="tijd">9.00-18.00</td></tr>
  <tr><th abbr="Woensdag" scope="row" axis="dag">Wo</th><td axis="tijd">9.00-18.00</td></tr>
  <tr><th abbr="Donderdag" scope="row" axis="dag">Do</th><td axis="tijd">9.00-18.00</td></tr>
  <tr><th abbr="Vrijdag" scope="row" axis="dag">Vr</th><td axis="tijd">9.00-21.00</td></tr>
  <tr><th abbr="Zaterdag" scope="row" axis="dag">Za</th><td axis="tijd">9.00-17.00</td></tr>
 </tbody>
</table>

Instead of the SCOPE attribute we could have used the HEADERS and ID attribute together, which are (probably) better for larger and more complex tables. For this kind of data, SCOPE was the most obvious choice. The AXIS attribute isn't used by any software that I know of, it does have a really nice future though, when it would be supported. You could ask software to retrieve the x for you in the following example: when dag=Ma tijd=x. I love that! It must be quite easy to make such a selection using CSS: td[axis=dag]:contains("Ma")+td[axis=tijd]; problem is that CSS doesn't return values, you can style them. And that is a feature, not a bug :-). If you don't like to use CSS3 you could also use [abbr=Maandag].

I must say that I love the "complex" markup you can create with tables. It looks a lot more semantic than a simple STRONG element to me (if you can compare those is a different question).

Comments

  1. Nice example of a simple table containing quite a lot of possible attributes. One thing though:

    <th abbr="Dinsdag" scope="row" axis="dag">Di</th>
    

    This is wrong, afair. The abbr-Attribute is supposed to contain the abbreviated form that the user agent might choose when space is constrained. For the long version of an abbreviated Table header cell the title Attribute would be appropriate.

    By the way, you should inform readers that they are required to wrap their comments in p-Tags. There might be people who won't guess that after reading the error msg of the comment parser

    Posted by Gerrit Kaiser at

  2. Om my god you are right. I should have used the ABBR element or have the values the other way around: "Di" inside the ABBR attribute and "Dinsdag" as the element contents.

    Posted by Anne at