W3C home > Mailing lists > Public > public-html-commits@w3.org > July 2009

html5/spec Overview.html,1.2493,1.2494

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 06 Jul 2009 03:07:05 +0000
To: public-html-commits@w3.org
Message-Id: <E1MNeXp-00057k-6u@lionel-hutz.w3.org>
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv19682

Modified Files:
	Overview.html 
Log Message:
Elaborate on how to describe a table. (whatwg r3356)

Index: Overview.html
===================================================================
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>&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>
    <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:07:15 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 6 July 2009 03:07:16 GMT