Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[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
Hixie committed Apr 8, 2011
1 parent 7702124 commit ea5c291
Show file tree
Hide file tree
Showing 3 changed files with 560 additions and 532 deletions.
362 changes: 186 additions & 176 deletions complete.html
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit ea5c291

Please sign in to comment.