Skip to content

Commit

Permalink
[] (0) Elaborate on how to describe a table.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@3356 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jul 6, 2009
1 parent 0259d8c commit e0465ae
Show file tree
Hide file tree
Showing 2 changed files with 378 additions and 23 deletions.
196 changes: 184 additions & 12 deletions index
View file
Expand Up @@ -67,7 +67,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
<h2 class="no-num no-toc" id=draft-standard-&mdash;-date:-01-jan-1901>Draft Standard &mdash; 3 July 2009</h2>
<h2 class="no-num no-toc" id=draft-standard-&mdash;-date:-01-jan-1901>Draft Standard &mdash; 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>-->
Expand Down Expand Up @@ -25972,25 +25972,201 @@ function AddCloud(data, x, y) { ... }</pre>
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>&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;legend&gt;Help&lt;/legend&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;legend&gt;Characteristics with positive and negative sides&lt;/legend&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-legend-element>legend</a></code></dt>

<dd>
<div class=example><pre>&lt;figure&gt;
&lt;legend&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;/legend&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><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>

</div>

<dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
Expand Down Expand Up @@ -26268,18 +26444,14 @@ function AddCloud(data, x, y) { ... }</pre>

</div>

<p>The <code><a href=#the-caption-element>caption</a></code> element should be included for any table
where the reader might have difficulty understanding the content or
where the table's structure would not be obvious to the user of a
screen reader. The element's contents should describe what the
purpose of the table is, along with any information that could be
useful for understanding and using the table.</p>

<p>When a <code><a href=#the-table-element>table</a></code> element is in a <code><a href=#the-figure-element>figure</a></code>
element alone but for the <code><a href=#the-figure-element>figure</a></code>'s <code><a href=#the-legend-element>legend</a></code>,
the <code><a href=#the-caption-element>caption</a></code> element should be omitted in favor of the
<code><a href=#the-legend-element>legend</a></code>.</p>

<p>A caption can introduce context for a table, making it
significantly easier to understand.</p>

<div class=example>

<p>Consider, for instance, the following table:</p>
Expand Down

0 comments on commit e0465ae

Please sign in to comment.