This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2 class="no-num no-toc" id=draft-standard-—-date:-01-jan-1901>Draft Standard — 3 July 2009</h2>
<h2 class="no-num no-toc" id=draft-standard-—-date:-01-jan-1901>Draft Standard — 6 July 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
tables for layout, primarily using CSS positioning and the CSS table
model.</p>
<div class=impl>
<p>User agents that do table analysis on arbitrary content are
encouraged to find heuristics to determine which tables actually
contain data and which are merely being used for layout. This
specification does not define a precise heuristic.</p>
</div>
<p>Tables have rows and columns given by their descendants. A table
must not have an empty row or column<span class=impl>, as
described in the description of the <a href=#table-model>table
model</a></span>. <!-- conformance criteria for detecting this
are in the table model section --></p>
<div class=impl>
<p>For tables that consist of more than just a grid of cells with
headers in the first row and headers in the first column, and for
any table in general where the reader might have difficulty
understanding the content, authors should include explanatory
information introducing the table. This information is useful for
all users, but is especially useful for users who cannot see the
table, e.g. users of screen readers.</p>
<p>Such explanatory information should introduce the purpose of the
table, outline its basic cell structure, highlight any trends or
patterns, and generally teach the user how to use the table.</p>
<div class=example>
<p>For instance, the following table:</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><p>...might benefit from a description explaining to the way the
table is laid out, something like "Characteristics are given in the
second column, with the negative side in the left column and the
positive side in the right column".</p>
</div>
<p>There are a variety of ways to include this information:</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>
<legend>Help</legend>
<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>
<legend>Characteristics with positive and negative sides</legend>
<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-legend-element>legend</a></code></dt>
<dd>
<div class=example><pre><figure>
<legend>
<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>
</legend>
<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><div class=impl>
<p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, the user agent
may report the contents of that attribute to the user.</p>
<p class=note>Authors are encouraged to use the
<code><a href=#the-caption-element>caption</a></code> element instead of the <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute.</p>
