Permalink
Browse files

[e] (0) apply wg decision

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8449

git-svn-id: http://svn.whatwg.org/webapps@5978 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 7702124 commit ea5c291891d0084f13475d591d2578839bf47e6b @Hixie Hixie committed Apr 8, 2011
Showing with 560 additions and 532 deletions.
  1. +186 −176 complete.html
  2. +186 −176 index
  3. +188 −180 source
View
362 complete.html
@@ -650,7 +650,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
<li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
<ol>
- <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
+ <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a>
+ <ol>
+ <li><a href=#table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques for describing tables</a></ol></li>
<li><a href=#the-caption-element><span class=secno>4.9.2 </span>The <code>caption</code> element</a></li>
<li><a href=#the-colgroup-element><span class=secno>4.9.3 </span>The <code>colgroup</code> element</a></li>
<li><a href=#the-col-element><span class=secno>4.9.4 </span>The <code>col</code> element</a></li>
@@ -37162,185 +37164,14 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
</div>
- <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>&lt;p&gt;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.&lt;/p&gt;
-&lt;table&gt;
- &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;table&gt;
- &lt;caption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
-
- <dd>
- <div class=example><pre>&lt;table&gt;
- &lt;caption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
- &lt;details&gt;
- &lt;summary&gt;Help&lt;/summary&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/details&gt;
- &lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;figure&gt;
- &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;table&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
- &lt;/table&gt;
-&lt;/figure&gt;</pre></div>
- </dd>
-
- <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;figure&gt;
- &lt;figcaption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/figcaption&gt;
- &lt;table&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
- &lt;/table&gt;
-&lt;/figure&gt;</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><a href=#attr-tdth-headers>headers</a></code> attributes:</p>
-
- <pre>&lt;table&gt;
- &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th&gt; Characteristic
- &lt;th&gt; Negative
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;th&gt; Mood
- &lt;td&gt; Sad
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;th&gt; Grade
- &lt;td&gt; Failing
- &lt;td&gt; Passing
-&lt;/table&gt;</pre>
-
- </div>
+ <p><a href=#table-descriptions-techniques>Guidance on how to
+ provide such information</a> is provided below.</p>
<p>The <dfn id=attr-table-summary title=attr-table-summary><code>summary</code></dfn>
attribute on <code><a href=#the-table-element>table</a></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
+ text for complex tables for users of screen readers. One of the <a 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>
@@ -37671,6 +37502,185 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
</div>
+ <h5 id=table-descriptions-techniques><span class=secno>4.9.1.1 </span>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>&lt;p&gt;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.&lt;/p&gt;
+&lt;table&gt;
+ &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;table&gt;
+ &lt;caption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
+
+ <dd>
+ <div class=example><pre>&lt;table&gt;
+ &lt;caption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
+ &lt;details&gt;
+ &lt;summary&gt;Help&lt;/summary&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/details&gt;
+ &lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;figure&gt;
+ &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;table&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+ &lt;/table&gt;
+&lt;/figure&gt;</pre></div>
+ </dd>
+
+ <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;figure&gt;
+ &lt;figcaption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/figcaption&gt;
+ &lt;table&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+ &lt;/table&gt;
+&lt;/figure&gt;</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><a href=#attr-tdth-headers>headers</a></code> attributes:</p>
+
+ <pre>&lt;table&gt;
+ &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Negative
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;th&gt; Mood
+ &lt;td&gt; Sad
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;th&gt; Grade
+ &lt;td&gt; Failing
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre>
+
+ </div>
+
+
+
+
<h4 id=the-caption-element><span class=secno>4.9.2 </span>The <dfn><code>caption</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
View
362 index
@@ -658,7 +658,9 @@
<li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
<li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
<ol>
- <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
+ <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a>
+ <ol>
+ <li><a href=#table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques for describing tables</a></ol></li>
<li><a href=#the-caption-element><span class=secno>4.9.2 </span>The <code>caption</code> element</a></li>
<li><a href=#the-colgroup-element><span class=secno>4.9.3 </span>The <code>colgroup</code> element</a></li>
<li><a href=#the-col-element><span class=secno>4.9.4 </span>The <code>col</code> element</a></li>
@@ -37146,185 +37148,14 @@ function AddCloud(data, x, y) { ... }</pre>
</div>
- <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>&lt;p&gt;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.&lt;/p&gt;
-&lt;table&gt;
- &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;table&gt;
- &lt;caption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
-
- <dd>
- <div class=example><pre>&lt;table&gt;
- &lt;caption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
- &lt;details&gt;
- &lt;summary&gt;Help&lt;/summary&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/details&gt;
- &lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
-&lt;/table&gt;</pre></div>
- </dd>
-
- <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;figure&gt;
- &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;table&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
- &lt;/table&gt;
-&lt;/figure&gt;</pre></div>
- </dd>
-
- <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>
-
- <dd>
- <div class=example><pre>&lt;figure&gt;
- &lt;figcaption&gt;
- &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
- &lt;p&gt;Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p&gt;
- &lt;/figcaption&gt;
- &lt;table&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th id="n"&gt; Negative
- &lt;th&gt; Characteristic
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td headers="n r1"&gt; Sad
- &lt;th id="r1"&gt; Mood
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;td headers="n r2"&gt; Failing
- &lt;th id="r2"&gt; Grade
- &lt;td&gt; Passing
- &lt;/table&gt;
-&lt;/figure&gt;</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><a href=#attr-tdth-headers>headers</a></code> attributes:</p>
-
- <pre>&lt;table&gt;
- &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th&gt; Characteristic
- &lt;th&gt; Negative
- &lt;th&gt; Positive
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;th&gt; Mood
- &lt;td&gt; Sad
- &lt;td&gt; Happy
- &lt;tr&gt;
- &lt;th&gt; Grade
- &lt;td&gt; Failing
- &lt;td&gt; Passing
-&lt;/table&gt;</pre>
-
- </div>
+ <p><a href=#table-descriptions-techniques>Guidance on how to
+ provide such information</a> is provided below.</p>
<p>The <dfn id=attr-table-summary title=attr-table-summary><code>summary</code></dfn>
attribute on <code><a href=#the-table-element>table</a></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
+ text for complex tables for users of screen readers. One of the <a 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>
@@ -37655,6 +37486,185 @@ side in the right column.&lt;/p&gt;
</div>
+ <h5 id=table-descriptions-techniques><span class=secno>4.9.1.1 </span>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>&lt;p&gt;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.&lt;/p&gt;
+&lt;table&gt;
+ &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>In the table's <code><a href=#the-caption-element>caption</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;table&gt;
+ &lt;caption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>In the table's <code><a href=#the-caption-element>caption</a></code>, in a <code><a href=#the-details-element>details</a></code> element</dt>
+
+ <dd>
+ <div class=example><pre>&lt;table&gt;
+ &lt;caption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
+ &lt;details&gt;
+ &lt;summary&gt;Help&lt;/summary&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/details&gt;
+ &lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre></div>
+ </dd>
+
+ <dt>Next to the table, in the same <code><a href=#the-figure-element>figure</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;figure&gt;
+ &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;table&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+ &lt;/table&gt;
+&lt;/figure&gt;</pre></div>
+ </dd>
+
+ <dt>Next to the table, in a <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></code></dt>
+
+ <dd>
+ <div class=example><pre>&lt;figure&gt;
+ &lt;figcaption&gt;
+ &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
+ &lt;p&gt;Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p&gt;
+ &lt;/figcaption&gt;
+ &lt;table&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th id="n"&gt; Negative
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;td headers="n r1"&gt; Sad
+ &lt;th id="r1"&gt; Mood
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;td headers="n r2"&gt; Failing
+ &lt;th id="r2"&gt; Grade
+ &lt;td&gt; Passing
+ &lt;/table&gt;
+&lt;/figure&gt;</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><a href=#attr-tdth-headers>headers</a></code> attributes:</p>
+
+ <pre>&lt;table&gt;
+ &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
+ &lt;thead&gt;
+ &lt;tr&gt;
+ &lt;th&gt; Characteristic
+ &lt;th&gt; Negative
+ &lt;th&gt; Positive
+ &lt;tbody&gt;
+ &lt;tr&gt;
+ &lt;th&gt; Mood
+ &lt;td&gt; Sad
+ &lt;td&gt; Happy
+ &lt;tr&gt;
+ &lt;th&gt; Grade
+ &lt;td&gt; Failing
+ &lt;td&gt; Passing
+&lt;/table&gt;</pre>
+
+ </div>
+
+
+
+
<h4 id=the-caption-element><span class=secno>4.9.2 </span>The <dfn><code>caption</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
View
368 source
@@ -41132,191 +41132,15 @@ function AddCloud(data, x, y) { ... }</pre>
</div>
- <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>&lt;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.&lt;/p>
-&lt;table>
- &lt;caption>Characteristics with positive and negative sides&lt;/caption>
- &lt;thead>
- &lt;tr>
- &lt;th id="n"> Negative
- &lt;th> Characteristic
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;td headers="n r1"> Sad
- &lt;th id="r1"> Mood
- &lt;td> Happy
- &lt;tr>
- &lt;td headers="n r2"> Failing
- &lt;th id="r2"> Grade
- &lt;td> Passing
-&lt;/table></pre></div>
- </dd>
-
- <dt>In the table's <code>caption</code></dt>
-
- <dd>
- <div class="example"><pre>&lt;table>
- &lt;caption>
- &lt;strong>Characteristics with positive and negative sides.&lt;/strong>
- &lt;p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p>
- &lt;/caption>
- &lt;thead>
- &lt;tr>
- &lt;th id="n"> Negative
- &lt;th> Characteristic
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;td headers="n r1"> Sad
- &lt;th id="r1"> Mood
- &lt;td> Happy
- &lt;tr>
- &lt;td headers="n r2"> Failing
- &lt;th id="r2"> Grade
- &lt;td> Passing
-&lt;/table></pre></div>
- </dd>
-
- <dt>In the table's <code>caption</code>, in a <code>details</code> element</dt>
-
- <dd>
- <div class="example"><pre>&lt;table>
- &lt;caption>
- &lt;strong>Characteristics with positive and negative sides.&lt;/strong>
- &lt;details>
- &lt;summary>Help&lt;/summary>
- &lt;p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p>
- &lt;/details>
- &lt;/caption>
- &lt;thead>
- &lt;tr>
- &lt;th id="n"> Negative
- &lt;th> Characteristic
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;td headers="n r1"> Sad
- &lt;th id="r1"> Mood
- &lt;td> Happy
- &lt;tr>
- &lt;td headers="n r2"> Failing
- &lt;th id="r2"> Grade
- &lt;td> Passing
-&lt;/table></pre></div>
- </dd>
-
- <dt>Next to the table, in the same <code>figure</code></dt>
-
- <dd>
- <div class="example"><pre>&lt;figure>
- &lt;figcaption>Characteristics with positive and negative sides&lt;/figcaption>
- &lt;p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p>
- &lt;table>
- &lt;thead>
- &lt;tr>
- &lt;th id="n"> Negative
- &lt;th> Characteristic
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;td headers="n r1"> Sad
- &lt;th id="r1"> Mood
- &lt;td> Happy
- &lt;tr>
- &lt;td headers="n r2"> Failing
- &lt;th id="r2"> Grade
- &lt;td> Passing
- &lt;/table>
-&lt;/figure></pre></div>
- </dd>
-
- <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt>
-
- <dd>
- <div class="example"><pre>&lt;figure>
- &lt;figcaption>
- &lt;strong>Characteristics with positive and negative sides&lt;/strong>
- &lt;p>Characteristics are given in the second column, with the
- negative side in the left column and the positive side in the right
- column.&lt;/p>
- &lt;/figcaption>
- &lt;table>
- &lt;thead>
- &lt;tr>
- &lt;th id="n"> Negative
- &lt;th> Characteristic
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;td headers="n r1"> Sad
- &lt;th id="r1"> Mood
- &lt;td> Happy
- &lt;tr>
- &lt;td headers="n r2"> Failing
- &lt;th id="r2"> Grade
- &lt;td> Passing
- &lt;/table>
-&lt;/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>&lt;table>
- &lt;caption>Characteristics with positive and negative sides&lt;/caption>
- &lt;thead>
- &lt;tr>
- &lt;th> Characteristic
- &lt;th> Negative
- &lt;th> Positive
- &lt;tbody>
- &lt;tr>
- &lt;th> Mood
- &lt;td> Sad
- &lt;td> Happy
- &lt;tr>
- &lt;th> Grade
- &lt;td> Failing
- &lt;td> Passing
-&lt;/table></pre>
-
- </div>
+ <p><a href="#table-descriptions-techniques">Guidance on how to
+ provide such information</a> is provided below.</p>
<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 @@ side in the right column.&lt;/p>
</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>&lt;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.&lt;/p>
+&lt;table>
+ &lt;caption>Characteristics with positive and negative sides&lt;/caption>
+ &lt;thead>
+ &lt;tr>
+ &lt;th id="n"> Negative
+ &lt;th> Characteristic
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;td headers="n r1"> Sad
+ &lt;th id="r1"> Mood
+ &lt;td> Happy
+ &lt;tr>
+ &lt;td headers="n r2"> Failing
+ &lt;th id="r2"> Grade
+ &lt;td> Passing
+&lt;/table></pre></div>
+ </dd>
+
+ <dt>In the table's <code>caption</code></dt>
+
+ <dd>
+ <div class="example"><pre>&lt;table>
+ &lt;caption>
+ &lt;strong>Characteristics with positive and negative sides.&lt;/strong>
+ &lt;p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p>
+ &lt;/caption>
+ &lt;thead>
+ &lt;tr>
+ &lt;th id="n"> Negative
+ &lt;th> Characteristic
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;td headers="n r1"> Sad
+ &lt;th id="r1"> Mood
+ &lt;td> Happy
+ &lt;tr>
+ &lt;td headers="n r2"> Failing
+ &lt;th id="r2"> Grade
+ &lt;td> Passing
+&lt;/table></pre></div>
+ </dd>
+
+ <dt>In the table's <code>caption</code>, in a <code>details</code> element</dt>
+
+ <dd>
+ <div class="example"><pre>&lt;table>
+ &lt;caption>
+ &lt;strong>Characteristics with positive and negative sides.&lt;/strong>
+ &lt;details>
+ &lt;summary>Help&lt;/summary>
+ &lt;p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p>
+ &lt;/details>
+ &lt;/caption>
+ &lt;thead>
+ &lt;tr>
+ &lt;th id="n"> Negative
+ &lt;th> Characteristic
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;td headers="n r1"> Sad
+ &lt;th id="r1"> Mood
+ &lt;td> Happy
+ &lt;tr>
+ &lt;td headers="n r2"> Failing
+ &lt;th id="r2"> Grade
+ &lt;td> Passing
+&lt;/table></pre></div>
+ </dd>
+
+ <dt>Next to the table, in the same <code>figure</code></dt>
+
+ <dd>
+ <div class="example"><pre>&lt;figure>
+ &lt;figcaption>Characteristics with positive and negative sides&lt;/figcaption>
+ &lt;p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p>
+ &lt;table>
+ &lt;thead>
+ &lt;tr>
+ &lt;th id="n"> Negative
+ &lt;th> Characteristic
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;td headers="n r1"> Sad
+ &lt;th id="r1"> Mood
+ &lt;td> Happy
+ &lt;tr>
+ &lt;td headers="n r2"> Failing
+ &lt;th id="r2"> Grade
+ &lt;td> Passing
+ &lt;/table>
+&lt;/figure></pre></div>
+ </dd>
+
+ <dt>Next to the table, in a <code>figure</code>'s <code>figcaption</code></dt>
+
+ <dd>
+ <div class="example"><pre>&lt;figure>
+ &lt;figcaption>
+ &lt;strong>Characteristics with positive and negative sides&lt;/strong>
+ &lt;p>Characteristics are given in the second column, with the
+ negative side in the left column and the positive side in the right
+ column.&lt;/p>
+ &lt;/figcaption>
+ &lt;table>
+ &lt;thead>
+ &lt;tr>
+ &lt;th id="n"> Negative
+ &lt;th> Characteristic
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;td headers="n r1"> Sad
+ &lt;th id="r1"> Mood
+ &lt;td> Happy
+ &lt;tr>
+ &lt;td headers="n r2"> Failing
+ &lt;th id="r2"> Grade
+ &lt;td> Passing
+ &lt;/table>
+&lt;/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>&lt;table>
+ &lt;caption>Characteristics with positive and negative sides&lt;/caption>
+ &lt;thead>
+ &lt;tr>
+ &lt;th> Characteristic
+ &lt;th> Negative
+ &lt;th> Positive
+ &lt;tbody>
+ &lt;tr>
+ &lt;th> Mood
+ &lt;td> Sad
+ &lt;td> Happy
+ &lt;tr>
+ &lt;th> Grade
+ &lt;td> Failing
+ &lt;td> Passing
+&lt;/table></pre>
+
+ </div>
+
+
+
+
<h4>The <dfn><code>caption</code></dfn> element</h4>
<dl class="element">

0 comments on commit ea5c291

Please sign in to comment.