SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    Is this table semantically correct?

    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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37; 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>
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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:
    <colgroup span="2"></colgroup> <!--if the first two belong in one group-->
    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.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

    Quote Originally Posted by Stomme poes View Post
    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!".

    Quote Originally Posted by Stomme poes View Post
    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.

    Quote Originally Posted by Stomme poes View Post
    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.

    Quote Originally Posted by Stomme poes View Post
    If they don't, each alone-column needs to get it's own colgroup, correct?
    Yep.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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).

    Quote Originally Posted by Stomme poes View Post
    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.

    Quote Originally Posted by Stomme poes View Post
    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?
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote 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.

  9. #9
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •