|
|
@@ -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><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><a href=#the-caption-element>caption</a></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><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><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><a href=#the-figure-element>figure</a></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><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></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><a href=#attr-tdth-headers>headers</a></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><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><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><a href=#the-caption-element>caption</a></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><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><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><a href=#the-figure-element>figure</a></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><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-figcaption-element>figcaption</a></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><a href=#attr-tdth-headers>headers</a></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 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