Short URL: http://html5.org/r/5978
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 5978 | 8449 | apply wg decision | 2011-04-08 21:35 |
Index: source =================================================================== --- source (revision 5977) +++ source (revision 5978) @@ -41132,191 +41132,15 @@ </div> - <p>There are a variety of ways to include this information, such as:</p> + <p><a href="#table-descriptions-techniques">Guidance on how to + provide such information</a> is provided below.</p> - <dl> - - <dt>In prose, surrounding the table</dt> - - <dd> - <div class="example"><pre><p>In the following table, characteristics are given in the second -column, with the negative side in the left column and the positive -side in the right column.</p> -<table> - <caption>Characteristics with positive and negative sides</caption> - <thead> - <tr> - <th id="n"> Negative - <th> Characteristic - <th> Positive - <tbody> - <tr> - <td headers="n r1"> Sad - <th id="r1"> Mood - <td> Happy - <tr> - <td headers="n r2"> Failing - <th id="r2"> Grade - <td> Passing -</table></pre></div> - </dd> - - <dt>In the table's <code>caption</code></dt> - - <dd> - <div class="example"><pre><table> - <caption> - <strong>Characteristics with positive and negative sides.</strong> - <p>Characteristics are given in the second column, with the - negative side in the left column and the positive side in the right - column.</p> - </caption> - <thead> - <tr> - <th id="n"> Negative - <th> Characteristic - <th> Positive - <tbody> - <tr> - <td headers="n r1"> Sad - <th id="r1"> Mood - <td> Happy - <tr> - <td headers="n r2"> Failing - <th id="r2"> Grade - <td> Passing -</table></pre></div> - </dd> - - <dt>In the table's <code>caption</code>, in a <code>details</code> element</dt> - - <dd> - <div class="example"><pre><table> - <caption> - <strong>Characteristics with positive and negative sides.</strong> - <details> - <summary>Help</summary> - <p>Characteristics are given in the second column, with the - negative side in the left column and the positive side in the right - column.</p> - </details> - </caption> - <thead> - <tr> - <th id="n"> Negative - <th> Characteristic - <th> Positive - <tbody> - <tr> - <td headers="n r1"> Sad - <th id="r1"> Mood - <td> Happy - <tr> - <td headers="n r2"> Failing - <th id="r2"> Grade - <td> Passing -</table></pre></div> - </dd> - - <dt>Next to the table, in the same <code>figure</code></dt> - - <dd> - <div class="example"><pre><figure> - <figcaption>Characteristics with positive and negative sides</figcaption> - <p>Characteristics are given in the second column, with the - negative side in the left column and the positive side in the right - column.</p> - <table> - <thead> - <tr> - <th id="n"> Negative - <th> Characteristic - <th> Positive - <tbody> - <tr> - <td headers="n r1"> Sad - <th id="r1"> Mood - <td> Happy - <tr> - <td headers="n r2"> Failing - <th id="r2"> Grade - <td> Passing - </table> -</figure></pre></div> - </dd> - - <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt> - - <dd> - <div class="example"><pre><figure> - <figcaption> - <strong>Characteristics with positive and negative sides</strong> - <p>Characteristics are given in the second column, with the - negative side in the left column and the positive side in the right - column.</p> - </figcaption> - <table> - <thead> - <tr> - <th id="n"> Negative - <th> Characteristic - <th> Positive - <tbody> - <tr> - <td headers="n r1"> Sad - <th id="r1"> Mood - <td> Happy - <tr> - <td headers="n r2"> Failing - <th id="r2"> Grade - <td> Passing - </table> -</figure></pre></div> - </dd> - - </dl> - - <p>Authors may also use other techniques, or combinations of the - above techniques, as appropriate.</p> - - <p>The best option, of course, rather than writing a description - explaining the way the table is laid out, is to adjust the table - such that no explanation is needed.</p> - - <div class="example"> - - <p>In the case of the table used in the examples above, a simple - rearrangement of the table so that the headers are on the top and - left sides removes the need for an explanation as well as removing - the need for the use of <code - title="attr-tdth-headers">headers</code> attributes:</p> - - <pre><table> - <caption>Characteristics with positive and negative sides</caption> - <thead> - <tr> - <th> Characteristic - <th> Negative - <th> Positive - <tbody> - <tr> - <th> Mood - <td> Sad - <td> Happy - <tr> - <th> Grade - <td> Failing - <td> Passing -</table></pre> - - </div> - <p>The <dfn title="attr-table-summary"><code>summary</code></dfn> attribute on <code>table</code> elements was suggested in earlier versions of the language as a technique for providing explanatory text for complex tables for users of screen readers. One of the <a - href="#table-descriptions">techniques</a> described <!--in the - <code>table</code> section--> above should be used + href="#table-descriptions-techniques">techniques</a> described + <!--in the <code>table</code> section--> below should be used instead. <!--Authors should not specify the <code title="attr-table-summary">summary</code> attribute on <code>table</code> elements. --> <!-- 2.65% pages --></p> @@ -41676,6 +41500,190 @@ </div> + <h5 id="table-descriptions-techniques">Techniques for describing tables</h5> + + <p>There are a variety of ways to include this information, such as:</p> + + <dl> + + <dt>In prose, surrounding the table</dt> + + <dd> + <div class="example"><pre><p>In the following table, characteristics are given in the second +column, with the negative side in the left column and the positive +side in the right column.</p> +<table> + <caption>Characteristics with positive and negative sides</caption> + <thead> + <tr> + <th id="n"> Negative + <th> Characteristic + <th> Positive + <tbody> + <tr> + <td headers="n r1"> Sad + <th id="r1"> Mood + <td> Happy + <tr> + <td headers="n r2"> Failing + <th id="r2"> Grade + <td> Passing +</table></pre></div> + </dd> + + <dt>In the table's <code>caption</code></dt> + + <dd> + <div class="example"><pre><table> + <caption> + <strong>Characteristics with positive and negative sides.</strong> + <p>Characteristics are given in the second column, with the + negative side in the left column and the positive side in the right + column.</p> + </caption> + <thead> + <tr> + <th id="n"> Negative + <th> Characteristic + <th> Positive + <tbody> + <tr> + <td headers="n r1"> Sad + <th id="r1"> Mood + <td> Happy + <tr> + <td headers="n r2"> Failing + <th id="r2"> Grade + <td> Passing +</table></pre></div> + </dd> + + <dt>In the table's <code>caption</code>, in a <code>details</code> element</dt> + + <dd> + <div class="example"><pre><table> + <caption> + <strong>Characteristics with positive and negative sides.</strong> + <details> + <summary>Help</summary> + <p>Characteristics are given in the second column, with the + negative side in the left column and the positive side in the right + column.</p> + </details> + </caption> + <thead> + <tr> + <th id="n"> Negative + <th> Characteristic + <th> Positive + <tbody> + <tr> + <td headers="n r1"> Sad + <th id="r1"> Mood + <td> Happy + <tr> + <td headers="n r2"> Failing + <th id="r2"> Grade + <td> Passing +</table></pre></div> + </dd> + + <dt>Next to the table, in the same <code>figure</code></dt> + + <dd> + <div class="example"><pre><figure> + <figcaption>Characteristics with positive and negative sides</figcaption> + <p>Characteristics are given in the second column, with the + negative side in the left column and the positive side in the right + column.</p> + <table> + <thead> + <tr> + <th id="n"> Negative + <th> Characteristic + <th> Positive + <tbody> + <tr> + <td headers="n r1"> Sad + <th id="r1"> Mood + <td> Happy + <tr> + <td headers="n r2"> Failing + <th id="r2"> Grade + <td> Passing + </table> +</figure></pre></div> + </dd> + + <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt> + + <dd> + <div class="example"><pre><figure> + <figcaption> + <strong>Characteristics with positive and negative sides</strong> + <p>Characteristics are given in the second column, with the + negative side in the left column and the positive side in the right + column.</p> + </figcaption> + <table> + <thead> + <tr> + <th id="n"> Negative + <th> Characteristic + <th> Positive + <tbody> + <tr> + <td headers="n r1"> Sad + <th id="r1"> Mood + <td> Happy + <tr> + <td headers="n r2"> Failing + <th id="r2"> Grade + <td> Passing + </table> +</figure></pre></div> + </dd> + + </dl> + + <p>Authors may also use other techniques, or combinations of the + above techniques, as appropriate.</p> + + <p>The best option, of course, rather than writing a description + explaining the way the table is laid out, is to adjust the table + such that no explanation is needed.</p> + + <div class="example"> + + <p>In the case of the table used in the examples above, a simple + rearrangement of the table so that the headers are on the top and + left sides removes the need for an explanation as well as removing + the need for the use of <code + title="attr-tdth-headers">headers</code> attributes:</p> + + <pre><table> + <caption>Characteristics with positive and negative sides</caption> + <thead> + <tr> + <th> Characteristic + <th> Negative + <th> Positive + <tbody> + <tr> + <th> Mood + <td> Sad + <td> Happy + <tr> + <th> Grade + <td> Failing + <td> Passing +</table></pre> + + </div> + + + + <h4>The <dfn><code>caption</code></dfn> element</h4> <dl class="element">