SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Mar 11, 2009, 08:22 #1
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- 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>
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>
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>
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
-
Mar 11, 2009, 12:37 #2
- 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% 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
-
Mar 11, 2009, 13:09 #3
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- 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.
You're using scope="colgroup", but you haven't defined any column groups. You need to declare those, e.g.,
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-->
Bleh, I'll dig up the specs again, now I seem to remember the default on span was 1 anyway...
so again thanks.
-
Mar 11, 2009, 13:34 #4
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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!".
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.
Nope. Row spans and column spans are semantic information, whereas cell spacing is purely presentational and belongs in the CSS.
Yep.Birnam wood is come to Dunsinane
-
Mar 12, 2009, 04:19 #5
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- 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>
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>
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.
-
Mar 12, 2009, 05:48 #6
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's right. You only need COL elements if you want to specify something per column (like widths, classes or CSS styles).
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.
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
-
Mar 12, 2009, 07:50 #7
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>£ 500</td> <td>£ 640</td> <td>£ 780</td> <td>£ 960</td> </tr> <tr> <th scope="row">Euros:</th> <td>€ 600</td> <td>€ 770</td> <td>€ 940</td> <td>€ 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!
-
Mar 12, 2009, 09:47 #8
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
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">
... 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>
Originally Posted by Tommy
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>
<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>£ 500</td> <td>£ 640</td> <td>£ 780</td> <td>£ 960</td> </tr> <tr> <th scope="row">Euros:</th> <td>€ 600</td> <td>€ 770</td> <td>€ 940</td> <td>€ 1160</td> </tr> </table>
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 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.
-
Mar 12, 2009, 09:53 #9
- 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>£ 500</td> <td>£ 640</td> <td>£ 780</td> <td>£ 960</td> </tr> <tr> <th scope="row">Euros:</th> <td>€ 600</td> <td>€ 770</td> <td>€ 940</td> <td>€ 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
-
Mar 12, 2009, 13:02 #10
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Originally Posted by me
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.
-
Mar 12, 2009, 13:36 #11
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. : )
If ever I end up serving them as XML , I will look the values up.
-
Mar 12, 2009, 13:55 #12
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
the border i added temporary, my browser (Konqueror) does not default to borders
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