- From: poot <cvsmail@w3.org>
- Date: Mon, 6 Jul 2009 12:07:27 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Elaborate on how to describe a table. (whatwg r3356)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2493&r2=1.2494&f=h
http://html5.org/tools/web-apps-tracker?from=3355&to=3356
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2493
retrieving revision 1.2494
diff -u -d -r1.2493 -r1.2494
--- Overview.html 3 Jul 2009 19:56:42 -0000 1.2493
+++ Overview.html 6 Jul 2009 03:07:02 -0000 1.2494
@@ -174,7 +174,7 @@
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
<!--ZZZ:-->
<!--<h2 class="no-num no-toc">W3C Working Draft 23 April 2009</h2>-->
- <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 3 July 2009</h2>
+ <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 6 July 2009</h2>
<!--:ZZZ-->
<dl><!-- ZZZ: update the month/day (twice), (un)comment out
<dt>This Version:</dt>
@@ -267,7 +267,7 @@
track.
<!--ZZZ:-->
<!--This specification is the 23 April 2009 Working Draft.-->
- This specification is the 3 July 2009 Editor's Draft.
+ This specification is the 6 July 2009 Editor's Draft.
<!--:ZZZ-->
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href="http://www.whatwg.org/">WHATWG</a>. The two specifications are
identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of)
@@ -22939,21 +22939,189 @@
readers are likely to find it very difficult to navigate pages with
tables used for layout.<p class="note">There are a variety of alternatives to using HTML
tables for layout, primarily using CSS positioning and the CSS table
- model.<p>User agents that do table analysis on arbitrary content are
+ model.<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>Tables have rows and columns given by their descendants. A table
+ 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 --><div class="impl">
+ are in the table model section --><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>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.<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:<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>
-
</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>
<dd>
<p>Returns the table's <code><a href="#the-caption-element">caption</a></code> element.</p>
@@ -23220,15 +23388,11 @@
<p>The <code><a href="#the-caption-element">caption</a></code> element takes part in the <a href="#table-model">table
model</a>.</p>
- </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>When a <code><a href="#the-table-element">table</a></code> element is in a <code><a href="#the-figure-element">figure</a></code>
+ </div><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>.<div class="example">
+ <code><a href="#the-legend-element">legend</a></code>.<p>A caption can introduce context for a table, making it
+ significantly easier to understand.<div class="example">
<p>Consider, for instance, the following table:</p>
Received on Monday, 6 July 2009 03:08:05 UTC