Skip to content

Commit

Permalink
[ac] (0) Give more details of how <caption> elements should be used.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@2863 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Feb 24, 2009
1 parent da55803 commit c91a5c9
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 1 deletion.
3 changes: 3 additions & 0 deletions header-whatwg
View file
Expand Up @@ -12,6 +12,9 @@
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
table.matrix, table.matrix td { border: none; text-align: right; }
table.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.applies th > * { display: block; white-space: nowrap; }
#updatesStatus { display: none; }
#updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }
Expand Down
60 changes: 59 additions & 1 deletion index
View file
Expand Up @@ -6,6 +6,9 @@
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
table.matrix, table.matrix td { border: none; text-align: right; }
table.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.applies th > * { display: block; white-space: nowrap; }
#updatesStatus { display: none; }
#updatesStatus.relevant { display: block; position: fixed; right: 1em; top: 1em; padding: 0.5em; font: bold small sans-serif; min-width: 25em; width: 30%; max-width: 40em; height: auto; border: ridge 4px gray; background: #EEEEEE; color: black; }
Expand Down Expand Up @@ -34,7 +37,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-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 23 February 2009</h2>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 24 February 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>
<dl><dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -23084,6 +23087,61 @@ function AddCloud(data, x, y) { ... }</pre>
<p>The <code><a href=#the-caption-element>caption</a></code> element takes part in the <a href=#table-model>table
model</a>.</p>

<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>

<div class=example>

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

<table class=dice-example><tr><th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
<tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
<tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
<tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
<tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
<tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
<tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
</table><p>In the abstract, this table is not clear. However, with a
caption giving the table's number (for reference in the main prose)
and explaining its use, it makes more sense:</p>

<pre>&lt;caption&gt;
&lt;strong&gt;Table 1.&lt;/strong&gt;
This table shows the total score obtained from rolling two six-sided
dice. The first row represents the value of the first die, the first
column the value of the second die. The total is given in the cell
that corresponds to the values of the two dice.
&lt;/caption&gt;</pre>

<p>This provides the user with more context:</p>

<table class=dice-example><caption>
<strong>Table 1.</strong>
This table shows the total score obtained from rolling two six-sided
dice. The first row represents the value of the first die, the first
column the value of the second die. The total is given in the cell
that corresponds to the values of the two dice.
</caption>
<tr><th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
<tr><th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
<tr><th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
<tr><th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
<tr><th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
<tr><th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
<tr><th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
</table></div>




<h4 id=the-colgroup-element><span class=secno>4.9.4 </span>The <dfn><code>colgroup</code></dfn> element</h4>

Expand Down
61 changes: 61 additions & 0 deletions source
View file
Expand Up @@ -25448,6 +25448,67 @@ function AddCloud(data, x, y) { ... }</pre>
<p>The <code>caption</code> element takes part in the <span>table
model</span>.</p>

<p>The <code>caption</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>table</code> element is in a <code>figure</code>
element alone but for the <code>figure</code>'s <code>legend</code>,
the <code>caption</code> element should be omitted in favor of the
<code>legend</code>.</p>

<div class="example">

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

<table class="dice-example">
<tr> <th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
<tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
<tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
<tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
<tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
<tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
<tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
</table>

<p>In the abstract, this table is not clear. However, with a
caption giving the table's number (for reference in the main prose)
and explaining its use, it makes more sense:</p>

<pre>&lt;caption>
&lt;strong>Table 1.&lt;/strong>
This table shows the total score obtained from rolling two six-sided
dice. The first row represents the value of the first die, the first
column the value of the second die. The total is given in the cell
that corresponds to the values of the two dice.
&lt;/caption></pre>

<p>This provides the user with more context:</p>

<table class="dice-example">
<caption>
<strong>Table 1.</strong>
This table shows the total score obtained from rolling two six-sided
dice. The first row represents the value of the first die, the first
column the value of the second die. The total is given in the cell
that corresponds to the values of the two dice.
</caption>
<tr> <th> <th> 1 <th> 2 <th> 3 <th> 4 <th> 5 <th> 6
<tr> <th> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7
<tr> <th> 2 <td> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8
<tr> <th> 3 <td> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9
<tr> <th> 4 <td> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10
<tr> <th> 5 <td> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11
<tr> <th> 6 <td> 7 <td> 8 <td> 9 <td> 10 <td> 11 <td> 12
</table>

</div>




<h4>The <dfn><code>colgroup</code></dfn> element</h4>

Expand Down

0 comments on commit c91a5c9

Please sign in to comment.