Is this table semantically correct?

**Stomme poes** · Mar 11, 2009, 08:22

Hallo,

I've made a table, based on info from a PDF. I'm trying to make it make sense, and to neither leave out information nor overdo it for other user agents. What I have (tried to translate well Engrish):

Code:

<table summary="Plus/Minus Level, the movement between levels after a claim, and the amount of total premium in percentages">
  <thead>
    <tr>
      <th abbr="damagefree years" scope="col">Plus/Minus Level</th>
      <th abbr="percent" scope="col">Premium percentage due</th>
      <th abbr="in 1 policy-year" colspan="4" scope="colgroup">Going to another +/- level: after 1 policy-year</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th scope="col">without claim, to level:</th>
      <th abbr="after 1 claim" scope="col">With 1 claim, to level:</th>
      <th abbr="after 2 claims" scope="col">With 2 claims, to level:</th>
      <th abbr="after 3 claims" scope="col">With 3 claims, to level:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">19</td>        
      <td>25</td>           
      <td>19</td>         
      <td>14</td>           
      <td>8</td>          
      <td>1</td>
    </tr>
    <tr>
      <td scope="row">18</td>        
      <td>25</td>
      <td>19</td>
      <td>13</td>
      <td>7</td>
      <td>1</td>
    </tr>
    <tr>
      <td scope="row">17</td>
      <td>25</td>
      <td>18</td>
      <td>12</td>
      <td>7</td>
      <td>1</td>
    </tr>
    <tr>
      <td scope="row">16</td>
      <td>25</td>
      <td>17</td>
      <td>11</td>
      <td>6</td>
      <td>1</td>
    </tr>
    <tr>                      
      <td scope="row">15</td>
      <td>25</td>
      <td>16</td>
      <td>10</td> 
      <td>6</td>
      <td>1</td>
    </tr>
    <tr>                                             
      <td scope="row">14</td>
      <td>25</td>
      <td>15</td>   
      <td>9</td>           
      <td>5</td>          
      <td>1</td>
    </tr>
    <tr>                         
      <td scope="row">13</td>        
      <td>30</td>           
      <td>14</td>     
      <td>8</td>           
      <td>4</td>          
      <td>1</td>
    </tr>
...removed a big middle here of more of the same...
    <tr>
      <td scope="row">3</td>        
      <td>90</td>            
      <td>4</td>          
      <td>1</td>           
      <td>1</td>          
      <td>1</td>
    </tr>
    <tr>
      <td scope="row">2</td>       
      <td>100</td>            
      <td>3</td>          
      <td>1</td>           
      <td>1</td>          
      <td>1</td>
    </tr>
    <tr>
      <td scope="row">1</td>       
      <td>125</td>            
      <td>2</td>          
      <td>1</td>           
      <td>1</td>          
      <td>1</td>
    </tr>
  </tbody>
</table>

For instance, question on the thead:
Compared to

Code:

  <thead>
    <tr>
      <th abbr="damagefree years" scope="col">Plus/Minus Level</th>
      <th abbr="percent" scope="col">Premium percentage due</th>
      <th abbr="in 1 policy-year" colspan="4" scope="colgroup">Going to another +/- level: after 1 policy-year</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th scope="col">without claim, to level:</th>
      <th abbr="after 1 claim" scope="col">With 1 claim, to level:</th>
      <th abbr="after 2 claims" scope="col">With 2 claims, to level:</th>
      <th abbr="after 3 claims" scope="col">With 3 claims, to level:</th>
    </tr>
  </thead>

...is this semantically the same as doing this (sorry had already copied, so not in Engrish but assume it's the same text as above):

Code:

  <thead>
    <tr>
      <th abbr="schadevrij jaren" rowspan="2" scope="col">Bonus/Malus Trede</th>
      <th abbr="percent"  rowspan="2" scope="col">Verschuldigd Premie Percentage</th>
      <th abbr="in 1 verzekeringsjaar" colspan="4" scope="colgroup">De overgang naar een andere bonus/malus-trede geschiedt: na één verzekerings*jaar</th>
    </tr>
    <tr>
      <th scope="col">zonder schade*geval naar trede</th>
      <th abbr="na 1 schade" scope="col">Met 1 schade*geval naar trede</th>
      <th abbr="na 2 schaden" scope="col">Met 2 schade*geval naar trede</th>
      <th abbr="na 3 schaden" scope="col">Met 3 schade*geval naar trede</th>
    </tr>
  </thead>

? Is it better or worse to have the first to th's have a rowspan of 2 and then no empty th's? or does it completely not matter?

I've never done a table head like this... it's not really irregular, so I'm not using headers because I think scope will cover this...

The way it would be read, if you say looked at row 3, and had one claim, is
(you started at level 18), "after 1 claim", "in 1 policy-year" you're now at level 12. I'm worried that things might get read out backwards, or that there's still too much text before the meaning of every digit. So, not sure if I really want abbr attributes here or not. Are they helping, or hurting?

The head of the table in the PDF looks like this:
http://stommepoes.nl/tabel.gif

Thanks

**AutisticCuckoo** · Mar 11, 2009, 12:37

I think it would be better to use rowspan="2" for the first two header cells than to have two unexplicably empty header cells in the second row.

Your summary attribute seems to be a description of the table rather than a summary of the content. If you can't provide a summary (because the data is too complex), it's probably better to omit the attribute. A summary could be something along the lines of 'The premium percentage due varies from X% to Y% depending on the plus/minus level'. The text you have looks more like a caption.

You're using scope="colgroup", but you haven't defined any column groups. You need to declare those, e.g.,

Code HTML4Strict:

<table summary="The premium percentage due varies from X% to Y% depending on the plus/minus level">
  <caption>Plus/Minus Level, the movement between levels after a claim, and the amount of total premium in percentages</caption>
  <colgroup span="2"></colgroup> <!--if the first two belong in one group-->
  <colgroup span="4"></colgroup>
  <thead>
    ...
  </thead>

**Stomme poes** · Mar 11, 2009, 13:09

Your summary attribute seems to be a description of the table rather than a summary of the content. If you can't provide a summary (because the data is too complex), it's probably better to omit the attribute. A summary could be something along the lines of 'The premium percentage due varies from X% to Y% depending on the plus/minus level'. The text you have looks more like a caption.

Ah, ok thanks. The PDF has no caption and I thought summary was primarily to let people know what a table was showing so as to let someone get enough info to know if they wanted to dive in... like the summary in the back of a book doesn't tell the story per se, but a bit over what it's about. I may do a caption then... not sure if I'm allowed (since they're visible).

You're using scope="colgroup", but you haven't defined any column groups. You need to declare those, e.g.,

Thanks for catching that, I was copying from another table I made a year ago which has no colgroups, however that's because if there's just one spanning all columns you don't need explicit colgroups... which I would have never remembered if you hadn't said it.

Will do with the rowspan, didn't know if that was old-fashioned HTML like cellspacing or not.

Thanks.

*edit:

If they don't, each alone-column needs to get it's own colgroup, correct? The only ones grouped are the four under the "1 year" header... so, 3 colgroups, span=1. span=1, and span=4?

Bleh, I'll dig up the specs again, now I seem to remember the default on span was 1 anyway...

so again thanks.

**AutisticCuckoo** · Mar 11, 2009, 13:34

Originally Posted by Stomme poes

I thought summary was primarily to let people know what a table was showing so as to let someone get enough info to know if they wanted to dive in...

That's the idea, and your text doesn't provide any information like that.

It's supposed to go like this, if I understand things correctly:
A screen reader user encounters a table and listens to the summary. He (let's say it's a he) should then be able to make the choice between navigating through the entire table to get the details vs being satisfied with the summary. Either way he should get the gist of the table's content.

For instance, a large table showing the election results for a parliament, district by district. This is a lot of data to take in, aurally. The summary could then outline which party won (and its percentage) plus perhaps the figures for the runners-up. Someone who just wants to know who'll be in charge tomorrow will then be content with hearing just the summary. Those who are really into politics may choose to listen to the whole lot.

Originally Posted by Stomme poes

like the summary in the back of a book doesn't tell the story per se, but a bit over what it's about.

But that has a very different purpose: it's meant to entice you to read the whole book. A table's summary has the opposite purpose: to give you enough information that you don't have to listen to the whole table.

A table summary for a book would be something like summary="The butler did it!".

Originally Posted by Stomme poes

I may do a caption then... not sure if I'm allowed (since they're visible).

I'm not saying you should use a caption, just that the text you provided would be better suited as a caption than as a summary.

Originally Posted by Stomme poes

Will do with the rowspan, didn't know if that was old-fashioned HTML like cellspacing or not.

Nope. Row spans and column spans are semantic information, whereas cell spacing is purely presentational and belongs in the CSS.

Originally Posted by Stomme poes

If they don't, each alone-column needs to get it's own colgroup, correct?

Yep.

**Stomme poes** · Mar 12, 2009, 04:19

Ah okay, was back here and it looks like I can just has teh colgroups without col's as col seems to be for things like someone to give an id to or for styling or whatnot... so, I came up with this which still looks weird (as I don't see examples of empty colgroups):

Code:

<table summary="thinking...">
  <colgroup></colgroup><!--first column isn't special-->
  <colgroup></colgroup><!--second column also not special-->
  <colgroup>
    <col span="4"><!--last four are grouped under an additional header-->
  </colgroup>
  <thead>

or I think I can get away with:

Code:

<table summary="thinking...">
  <colgroup></colgroup><!--first column isn't special-->
  <colgroup></colgroup><!--second column also not special-->
  <colgroup span="4"></colgroup><!--last four are a group-->
  <thead>

It seems I don't NEED col, it's just there if needed... and if it's there, then IT gets the span attribute, otherwise colgroup can have it.

And if I understand correctly, the thead's contents don't need any changes, as they are scope="col" and represent a column anyway, right?
(ok actually it seems simply the number of td's in a row determine that but mine match up...)

For instance, a large table showing the election results for a parliament, district by district. This is a lot of data to take in, aurally. The summary could then outline which party won (and its percentage) plus perhaps the figures for the runners-up. Someone who just wants to know who'll be in charge tomorrow will then be content with hearing just the summary. Those who are really into politics may choose to listen to the whole lot.

Hmmm, I think this is purely a look-up table (all anyone cares about is what year they're at, and what happens to that level if they have x claim(s))... but I still want to warn people what the table's purpose is... can I make a caption stating the table's purpose and just make it invisible (same colour text as background or something)? That way I'm being true to how the PDF looks while still warning people what the table is about (so they can determine if they even care to dive in).

**AutisticCuckoo** · Mar 12, 2009, 05:48

Originally Posted by Stomme poes

It seems I don't NEED col, it's just there if needed... and if it's there, then IT gets the span attribute, otherwise colgroup can have it.

That's right. You only need COL elements if you want to specify something per column (like widths, classes or CSS styles).

Originally Posted by Stomme poes

And if I understand correctly, the thead's contents don't need any changes, as they are scope="col" and represent a column anyway, right?

Yes. One problem is that at least older screen readers (e.g., JAWS 6) don't support scope. The alternative is to use id on the header cells and the headers attribute on all the data cells. That's a lot of code bloat, though.

Originally Posted by Stomme poes

but I still want to warn people what the table's purpose is... can I make a caption stating the table's purpose and just make it invisible (same colour text as background or something)?

I wouldn't use invisible text, but perhaps off-screen positioning the CAPTION? Or an off-screen <Hx> heading before the table?

**hgilbert** · Mar 12, 2009, 07:50

May I ask in this thread about a very unsemantic travel prices table?

I suppose the solution above was resolved, so was wondering if I could carry on from here. ie: How to semantically correct tables thread.

Anyway,
I've been trying to make my travel prices table more semantic after the advice above ... but am still lost!

To make it easier for myself I tried to simplify the HTML which now looks like this:

Code HTML4Strict:

<table border="1" summary="Prices shown for travel seasons and currencies: Pound Sterling and Euros">
    <tr>
        <th rowspan="4" scope="row">Currency</th>
        <th colspan="4" scope="colgroup">Season</th>
    </tr>
    <tr>
        <th scope="col">Low</th>
        <th scope="col">Mid</th>
        <th scope="col">Mid-High</th>
        <th scope="col">High</th>
    </tr>
    <tr>
        <td>7th Mar - 11th Apr</td>
        <td>11th Apr - 16th May</td>
        <td>16th May - 18th July</td>
        <td rowspan="2">18th July - 29th Aug</td>
    </tr>
    <tr>
        <td>31st Oct - 14th Nov</td>
        <td>3rd Oct - 31st Oct</td>
        <td>29th Aug - 3rd Oct</td>
    </tr>
    <tr>
        <th scope="row">Pounds:</th>
        <td>&pound; 500</td>
        <td>&pound; 640</td>
        <td>&pound; 780</td>
        <td>&pound; 960</td>
    </tr>
    <tr>
        <th scope="row">Euros:</th>
        <td>&euro; 600</td>
        <td>&euro; 770</td>
        <td>&euro; 940</td>
        <td>&euro; 1160</td>
    </tr>
</table>

I got rid of all empty cells.

The problem I am having now is that I can't seem to add the <thead>, <tbody> and <tfoot> anymore without breaking layout.

Also am not quite sure I am applying the scopes correctly.

I will keep searching the net - I still haven't found a solution - but any help would be appreciated.

thanks

ps: if it's better to open a new thread, I will do just that - just wasn't sure also!

**Stomme poes** · Mar 12, 2009, 09:47

I think it would be a nice idea to have a stickie (maybe not this one) re semantic tables. I usually have a few resources open when making ones that have "something new" in them...

I'll throw my 2 cents in... partially using what Tommy has already said:

Code:

<table border="1" summary="Prices shown for travel seasons and currencies: Pound Sterling and Euros">

According to Tommy this should be in a caption, not the summary... I think your table's small enough to get away with an actual summary (that prices range from $blah in the low season to $blah in the highest...)

... and border belongs in the CSS, so that can come out of the HTML.

Code:

    <tr>
        <th rowspan="4" scope="row">Currency</th>
        <th colspan="4" scope="colgroup">Season</th>
    </tr>

You're making the same mistake I did... if there's only a single th which spans all the way across the table you don't need to declare a colgroup (why I got it wrong) but your case is like mine above:

Originally Posted by Tommy

You're using scope="colgroup", but you haven't defined any column groups. You need to declare those, e.g... (sample above)

Code:

    <tr>
        <td>7th Mar - 11th Apr</td>
        <td>11th Apr - 16th May</td>
        <td>16th May - 18th July</td>
        <td rowspan="2">18th July - 29th Aug</td>
    </tr>
    <tr>
        <td>31st Oct - 14th Nov</td>
        <td>3rd Oct - 31st Oct</td>
        <td>29th Aug - 3rd Oct</td>
    </tr>

You might not need different td's for each grouping of dates-- just
<td>7th Mar - 11th Apr, 31st Oct - 14th Nov</td>
where the width you set on the th's would make those wrap as they are now anyway.

Code:

    <tr>
        <th scope="row">Pounds:</th>
        <td>&pound; 500</td>
        <td>&pound; 640</td>
        <td>&pound; 780</td>
        <td>&pound; 960</td>
    </tr>
    <tr>
        <th scope="row">Euros:</th>
        <td>&euro; 600</td>
        <td>&euro; 770</td>
        <td>&euro; 940</td>
        <td>&euro; 1160</td>
    </tr>
</table>

That looks like the correct use of scope... basically if everything under a th belongs under it, the th gets scope="col" and if everyone in a row of td's belong to the furthest left (or right if your table is set the other way) then scope="row" is correct.

The problem I am having now is that I can't seem to add the <thead>, <tbody> and <tfoot> anymore without breaking layout.

You're putting them in like normal?? They really shouldn't have any visual effect.

You're using XHTML strict... if that's ever going to be real XHTML or if the data is going to ever get converted to an XML file, know that those named character entities don't mix with XML. You'd need
€ and ... I forget what pound is cause I don't use it. : )

However as long as this page is forever and ever sent as text/html then they're fine.

**AutisticCuckoo** · Mar 12, 2009, 09:53

Here's an attempt:

Code HTML4Strict:

<table summary="Prices vary from 500 pounds (600 euros) to 960 pounds (1160 euros) depending on the season">
  <caption>Prices shown for travel seasons and currencies: Pound Sterling and Euros</caption>
  <colgroup span="4"></colgroup>
  <thead>
    <tr>
        <th rowspan="4" scope="row">Currency</th>
        <th colspan="4" scope="colgroup">Season</th>
    </tr>
    <tr>
        <th scope="col">Low</th>
        <th scope="col">Mid</th>
        <th scope="col">Mid-High</th>
        <th scope="col">High</th>
    </tr>
    <tr>
        <td>7th Mar - 11th Apr</td>
        <td>11th Apr - 16th May</td>
        <td>16th May - 18th July</td>
        <td rowspan="2">18th July - 29th Aug</td>
    </tr>
    <tr>
        <td>31st Oct - 14th Nov</td>
        <td>3rd Oct - 31st Oct</td>
        <td>29th Aug - 3rd Oct</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th scope="row">Pounds:</th>
        <td>&pound; 500</td>
        <td>&pound; 640</td>
        <td>&pound; 780</td>
        <td>&pound; 960</td>
    </tr>
    <tr>
        <th scope="row">Euros:</th>
        <td>&euro; 600</td>
        <td>&euro; 770</td>
        <td>&euro; 940</td>
        <td>&euro; 1160</td>
    </tr>
  </tbody>
</table>

Changes:

Removed the presentational border attribute; this belongs in the CSS.
Made the bad summary text into a caption.
Added a real summary.
Added a colgroup element.
Added tags for thead and tbody.

If the presentation doesn't work with these tags, you may need to fix the CSS.

Edit:

Stomme Poes addressed most of these issues while I was typing.

**Stomme poes** · Mar 12, 2009, 13:02

Originally Posted by me

That looks like the correct use of scope... basically if everything under a th belongs under it, the th gets scope="col" and if everyone in a row of td's belong to the furthest left (or right if your table is set the other way) then scope="row" is correct.

Looking again I just now see that th's instead of td's are the far-left element. Even though the first td of a row is a sort of header (name of the row) I've actually never seen a th used in a tbody before. While I've also never seen an example of them being used like that in any of the references, is this ok? Can a th begin a row of td's?

Also, I've never seen a table dealing with empty rows/columns without empty elements.

*edit also I was in a hurry and didn't see that my character entitity didn't come out right... I meant to have the & # 8364 ; for the euro symbol show (I must have missed a space).

Yesh, we need a semantic tables thread somewhere stickied. There are a lot of situations esp of slightly irregular tables that are simply not listed in the w3c page.

**hgilbert** · Mar 12, 2009, 13:36

Hi,

the border i added temporary, my browser (Konqueror) does not default to borders

OK I've updated the bookings page and factorized the CSS a bit.

Only in IE 6 - I can't get the Pounds and Euros cells to right-align.

You're using XHTML strict... if that's ever going to be real XHTML or if the data is going to ever get converted to an XML file, know that those named character entities don't mix with XML. You'd need
€ and ... I forget what pound is cause I don't use it. : )

I am using XHTML strict but am leaving as character entities for maintenance reasons.

If ever I end up serving them as XML , I will look the values up.

**Stomme poes** · Mar 12, 2009, 13:55

the border i added temporary, my browser (Konqueror) does not default to borders

Neither does mine, I start off all my tables (for in the beginning) with something like
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
}

just to see how it ended up after writing the HTML.

The pounds and euros are looking aligned-center here (FF).

User Tag List

Thread: Is this table semantically correct?

Thread Tools

Display

Is this table semantically correct?

Bookmarks

Bookmarks

Posting Permissions