Skip to content

/ html

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
@Hixie
Hixie committed Apr 8, 2011
1 parent 7702124 commit ea5c291891d0084f13475d591d2578839bf47e6b
Unified Split
Showing with 560 additions and 532 deletions.
  1. +186 −176 complete.html
  2. +186 −176 index
  3. +188 −180 source
362 complete.html
View file
<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>

</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>
</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>

0 comments on commit ea5c291

Please sign in to comment.