Bugzilla – Bug 534
Give more details of how <caption> elements should be used.
Last modified: 2009-05-27 14:32:39 CEST
Index: source =================================================================== --- source (revision 2862) +++ source (revision 2863) @@ -25448,6 +25448,67 @@ <p>The <code>caption</code> element takes part in the <span>table model</span>.</p> + <p>The <code>caption</code> element should be included for any table + where the reader might have difficulty understanding the content or + where the table's structure would not be obvious to the user of a + screen reader. The element's contents should describe what the + purpose of the table is, along with any information that could be + useful for understanding and using the table.</p> + + <p>When a <code>table</code> element is in a <code>figure</code> + element alone but for the <code>figure</code>'s <code>legend</code>, + the <code>caption</code> element should be omitted in favor of the + <code>legend</code>.</p> + + <div class="example"> + + <p>Consider, for instance, the following table:</p> + + <table class="dice-example"> + <tr> <th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6 + <tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 + <tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 + <tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 + <tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 + <tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 + <tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12 + </table> + + <p>In the abstract, this table is not clear. However, with a + caption giving the table's number (for reference in the main prose) + and explaining its use, it makes more sense:</p> + + <pre><caption> +<strong>Table 1.</strong> +This table shows the total score obtained from rolling two six-sided +dice. The first row represents the value of the first die, the first +column the value of the second die. The total is given in the cell +that corresponds to the values of the two dice. +</caption></pre> + + <p>This provides the user with more context:</p> + + <table class="dice-example"> + <caption> + <strong>Table 1.</strong> + This table shows the total score obtained from rolling two six-sided + dice. The first row represents the value of the first die, the first + column the value of the second die. The total is given in the cell + that corresponds to the values of the two dice. + </caption> + <tr> <th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6 + <tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 + <tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 + <tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 + <tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 + <tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 + <tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12 + </table> + + </div> + + + <h4>The <dfn><code>colgroup</code></dfn> element</h4>