- From: poot <cvsmail@w3.org>
- Date: Sat, 12 Sep 2009 13:02:46 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Table examples. (whatwg r3813)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2981&r2=1.2982&f=h
http://html5.org/tools/web-apps-tracker?from=3812&to=3813
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2981
retrieving revision 1.2982
diff -u -d -r1.2981 -r1.2982
--- Overview.html 11 Sep 2009 19:17:39 -0000 1.2981
+++ Overview.html 12 Sep 2009 04:02:19 -0000 1.2982
@@ -168,13 +168,52 @@
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
+ </style><style type="text/css">
+
+ .matrix, .matrix td { border: none; text-align: right; }
+ .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; }
+
+ #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
+ #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
+ #table-example-1 caption { padding-bottom: 0.5em; }
+ #table-example-1 thead, #table-example-1 tbody { border: none; }
+ #table-example-1 th, #table-example-1 td { border: solid thin; }
+ #table-example-1 th { font-weight: normal; }
+ #table-example-1 td { border-style: none solid; vertical-align: top; }
+ #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
+ #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
+ #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
+ #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
+ #table-example-1 tbody td:first-child::after { content: leader(". "); }
+ #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
+ #table-example-1 tbody td:first-child + td { width: 10em; }
+ #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
+ #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
+
+ .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
+ .apple-table-examples * { font-family: "Times", serif; }
+ .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
+ .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
+ .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
+ .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
+ .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
+ .apple-table-examples td { text-align: right; vertical-align: top; }
+ .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
+ .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
+ .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
+ .apple-table-examples sup { line-height: 0; }
+
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><!-- ZZZ ED vs WD --><body onload="fixBrokenLink()"><div class="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<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 25 August 2009</h2>-->
- <h2 class="no-num no-toc" id="editor-s-draft-11-september-2009">Editor's Draft 11 September 2009</h2>
+ <h2 class="no-num no-toc" id="editor-s-draft-12-september-2009">Editor's Draft 12 September 2009</h2>
<!--:ZZZ-->
<dl><!-- ZZZ: update the month/day (twice), (un)comment out--><!--
<dt>This Version:</dt>
@@ -273,7 +312,7 @@
track.
<!--ZZZ:-->
<!--This specification is the 25 August 2009 Working Draft.-->
- This specification is the 11 September 2009 Editor's Draft.
+ This specification is the 12 September 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)
@@ -613,7 +652,8 @@
<li><a href="#processing-model-0"><span class="secno">4.9.12 </span>Processing model</a>
<ol>
<li><a href="#forming-a-table"><span class="secno">4.9.12.1 </span>Forming a table</a></li>
- <li><a href="#header-and-data-cell-semantics"><span class="secno">4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></ol></li>
+ <li><a href="#header-and-data-cell-semantics"><span class="secno">4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></li>
+ <li><a href="#examples-0"><span class="secno">4.9.13 </span>Examples</a></ol></li>
<li><a href="#forms"><span class="secno">4.10 </span>Forms</a>
<ol>
<li><a href="#the-form-element"><span class="secno">4.10.1 </span>The <code>form</code> element</a></li>
@@ -742,13 +782,13 @@
<li><a href="#general"><span class="secno">5.4.1 </span>General</a></li>
<li><a href="#vcard"><span class="secno">5.4.2 </span>vCard</a>
<ol>
- <li><a href="#examples-0"><span class="secno">5.4.2.1 </span>Examples</a></ol></li>
+ <li><a href="#examples-1"><span class="secno">5.4.2.1 </span>Examples</a></ol></li>
<li><a href="#vevent"><span class="secno">5.4.3 </span>vEvent</a>
<ol>
- <li><a href="#examples-1"><span class="secno">5.4.3.1 </span>Examples</a></ol></li>
+ <li><a href="#examples-2"><span class="secno">5.4.3.1 </span>Examples</a></ol></li>
<li><a href="#licensing-works"><span class="secno">5.4.4 </span>Licensing works</a>
<ol>
- <li><a href="#examples-2"><span class="secno">5.4.4.1 </span>Examples</a></ol></ol></li>
+ <li><a href="#examples-3"><span class="secno">5.4.4.1 </span>Examples</a></ol></ol></li>
<li><a href="#converting-html-to-other-formats"><span class="secno">5.5 </span>Converting HTML to other formats</a>
<ol>
<li><a href="#json"><span class="secno">5.5.1 </span>JSON</a></li>
@@ -26455,7 +26495,154 @@
elements and its text content, if any, consists only of
<a href="#white_space">White_Space</a> characters.</p>
- </div><h3 id="forms"><span class="secno">4.10 </span>Forms</h3><p class="XXX annotation"><b>Status: </b><i>Working draft</i><p>Forms allow unscripted client-server interaction: given a form, a
+ </div><h4 id="examples-0"><span class="secno">4.9.13 </span>Examples</h4><p><i>This section is non-normative.</i><p>The following shows how might one mark up the bottom part of
+ table 45 of the <cite>Smithsonian physical tables, Volume
+ 71</cite>:</p><!-- Smithsonian physical tables, Volume 71: By Smithsonian Institution, Frederick Eugene Fowle; page 76 --><pre><table>
+ <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
+ Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
+ <thead>
+ <tr>
+ <th rowspan=2>Grade.</th>
+ <th rowspan=2>Yield Point.</th>
+ <th colspan=2>Ultimate tensile strength</th>
+ <th rowspan=2>Per sent elong. 50.8mm or 2 in.</th>
+ <th rowspan=2>Per cent reduct. area.</th>
+ </tr>
+ <tr>
+ <th>kg/mm<sup>2</sup></th>
+ <th>lb/in<sup>2</sup></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Hard</td>
+ <td>0.45 ultimate</td>
+ <td>56.2</td>
+ <td>80,000</td>
+ <td>15</td>
+ <td>20</td>
+ </tr>
+ <tr>
+ <td>Medium</td>
+ <td>0.45 ultimate</td>
+ <td>49.2</td>
+ <td>70,000</td>
+ <td>18</td>
+ <td>25</td>
+ </tr>
+ <tr>
+ <td>Soft</td>
+ <td>0.45 ultimate</td>
+ <td>42.2</td>
+ <td>60,000</td>
+ <td>22</td>
+ <td>30</td>
+ </tr>
+ </tbody>
+</table></pre><p>This table could look like this:<table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
+ Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
+ <thead><tr><th rowspan="2">Grade.</th>
+ <th rowspan="2">Yield Point.</th>
+ <th colspan="2">Ultimate tensile strength</th>
+ <th rowspan="2">Per cent elong. 50.8 mm or 2 in.</th>
+ <th rowspan="2">Per cent reduct. area.</th>
+ <tr><th>kg/mm<sup>2</sup></th>
+ <th>lb/in<sup>2</sup></th>
+ <tbody><tr><td>Hard</td>
+ <td>0.45 ultimate</td>
+ <td>56.2</td>
+ <td>80,000</td>
+ <td>15</td>
+ <td>20</td>
+ <tr><td>Medium</td>
+ <td>0.45 ultimate</td>
+ <td>49.2</td>
+ <td>70,000</td>
+ <td>18</td>
+ <td>25</td>
+ <tr><td>Soft</td>
+ <td>0.45 ultimate</td>
+ <td>42.2</td>
+ <td>60,000</td>
+ <td>22</td>
+ <td>30</td>
+ </table><hr><p>The following shows how one might mark up the gross margin table
+ on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:<pre><table>
+ <thead>
+ <tr>
+ <th>
+ <th>2008
+ <th>2007
+ <th>2006
+ <tbody>
+ <tr>
+ <th>Net sales
+ <td>$ 32,479
+ <td>$ 24,006
+ <td>$ 19,315
+ <tr>
+ <th>Cost of sales
+ <td> 21,334
+ <td> 15,852
+ <td> 13,717
+ <tbody>
+ <tr>
+ <th>Gross margin
+ <td>$ 11,145
+ <td>$ 8,154
+ <td>$ 5,598
+ <tfoot>
+ <tr>
+ <th>Gross margin percentage
+ <td>34.3%
+ <td>34.0%
+ <td>29.0%
+</table></pre><p>This table could look like this:<table class="apple-table-examples e1"><thead><tr><th>
+ <th>2008
+ <th>2007
+ <th>2006
+ <tbody><tr><th>Net sales
+ <td>$ 32,479
+ <td>$ 24,006
+ <td>$ 19,315
+ <tr><th>Cost of sales
+ <td> 21,334
+ <td> 15,852
+ <td> 13,717
+ <tbody><tr><th>Gross margin
+ <td>$ 11,145
+ <td>$ 8,154
+ <td>$ 5,598
+ <tfoot><tr><th>Gross margin percentage
+ <td>34.3%
+ <td>34.0%
+ <td>29.0%
+ </table><hr><p>The following shows how one might mark up the operating expenses
+ table from lower on the same page of that document:<pre><table>
+ <colgroup> <col>
+ <colgroup> <col> <col> <col>
+ <thead>
+ <tr> <th> <th>2008 <th>2007 <th>2006
+ <tbody>
+ <tr> <th scope=rowgroup> Research and development
+ <td> $ 1,109 <td> $ 782 <td> $ 712
+ <tr> <th scope=row> Percentage of net sales
+ <td> 3.4% <td> 3.3% <td> 3.7%
+ <tbody>
+ <tr> <th scope=rowgroup> Selling, general, and administrative
+ <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
+ <tr> <th scope=row> Percentage of net sales
+ <td> 11.6% <td> 12.3% <td> 12.6%
+</table></pre><p>This table could look like this:<table class="apple-table-examples e2"><thead><tr><th> <th>2008 <th>2007 <th>2006
+ <tbody><tr><th scope="rowgroup"> Research and development
+ <td> $ 1,109 <td> $ 782 <td> $ 712
+ <tr><th scope="row"> Percentage of net sales
+ <td> 3.4% <td> 3.3% <td> 3.7%
+ <tbody><tr><th scope="rowgroup"> Selling, general, and administrative
+ <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
+ <tr><th scope="row"> Percentage of net sales
+ <td> 11.6% <td> 12.3% <td> 12.6%
+ </table><h3 id="forms"><span class="secno">4.10 </span>Forms</h3><p class="XXX annotation"><b>Status: </b><i>Working draft</i><p>Forms allow unscripted client-server interaction: given a form, a
user can provide data, submit it to the server, and have the server
act on it accordingly (e.g. returning the results of a search or
calculation). The elements used in forms can also be used for user
@@ -39944,7 +40131,7 @@
<a href="#url">URL</a>s are specified.</p>
<dd>
- </dl><h5 id="examples-0"><span class="secno">5.4.2.1 </span>Examples</h5><div class="example">
+ </dl><h5 id="examples-1"><span class="secno">5.4.2.1 </span>Examples</h5><div class="example">
<p>Here is a long example <code title="md-vcard"><a href="#md-vcard">vcard</a></code> for a
fictional character called "Jack Bauer":</p>
@@ -40530,7 +40717,7 @@
</ul></li>
- </ol><h5 id="examples-1"><span class="secno">5.4.3.1 </span>Examples</h5><!-- get more from http://www.ietf.org/rfc/rfc2445.txt --><div class="example">
+ </ol><h5 id="examples-2"><span class="secno">5.4.3.1 </span>Examples</h5><!-- get more from http://www.ietf.org/rfc/rfc2445.txt --><div class="example">
<p>Here is an example of a page that uses the <code title="md-vevent"><a href="#md-vevent">vevent</a></code> vocabulary to mark up an event:</p>
@@ -40655,7 +40842,7 @@
</dd>
</dl><p>In addition, exactly one property with the name <code title="md-about"><a href="#md-about">about</a></code> must be present within each <a href="#concept-item" title="concept-item">item</a> with the type <code title="md-work"><a href="#md-work">work</a></code>, giving the <a href="#url">URL</a> of the
- work.<h5 id="examples-2"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
+ work.<h5 id="examples-3"><span class="secno">5.4.4.1 </span>Examples</h5><div class="example">
<p>This example shows an embedded image entitled <cite>My
Pond</cite>, licensed under the Creative Commons Attribution-Share
Received on Saturday, 12 September 2009 04:03:25 UTC