[html5] r3813 - [e] (0) Table examples.
whatwg at whatwg.org
whatwg at whatwg.org
Fri Sep 11 21:07:10 PDT 2009
Author: ianh
Date: 2009-09-11 21:07:09 -0700 (Fri, 11 Sep 2009)
New Revision: 3813
Modified:
index
source
Log:
[e] (0) Table examples.
Modified: index
===================================================================
--- index 2009-09-11 19:22:25 UTC (rev 3812)
+++ index 2009-09-12 04:07:09 UTC (rev 3813)
@@ -1,11 +1,6 @@
<!DOCTYPE html><html lang=en-US-x-hixie><title>HTML5</title><link href=/style/specification rel=stylesheet><link href=/images/icon rel=icon><style>
.proposal { border: blue solid; padding: 1em; }
.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; }
#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; }
@@ -24,6 +19,45 @@
.rfc2119.m\ust::after { content: '\2605'; }
.rfc2119.s\hould::after { content: '\2606'; }
[hidden] { display: none; }
+ </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, id=complete rel=stylesheet title="Complete specification"><link href=data:text/css,.impl%20{%20display:%20none;%20} id=author rel="alternate stylesheet" title="Author documentation only"><link href=data:text/css,.impl%20{%20background:%20%23FFEEEE;%20} id=highlight rel="alternate stylesheet" title="Highlight implementation requirements"><link href=status.css rel=stylesheet><script>
var loadTimer = new Date();
var current_revision = "r" + "$Revision$".substr(11);
@@ -71,7 +105,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML5</h1>
- <h2 class="no-num no-toc" id=draft-standard-—-11-september-2009>Draft Standard — 11 September 2009</h2>
+ <h2 class="no-num no-toc" id=draft-standard-—-12-september-2009>Draft Standard — 12 September 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>-->
@@ -473,7 +507,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>
@@ -602,13 +637,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>
@@ -29765,10 +29800,178 @@
</div>
+ <h4 id=examples-0><span class=secno>4.9.13 </span>Examples</h4>
+ <p><i>This section is non-normative.</i></p>
- <h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+ <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:</p>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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>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
@@ -44608,7 +44811,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>
+ </dl><h5 id=examples-1><span class=secno>5.4.2.1 </span>Examples</h5>
<div class=example>
@@ -45212,7 +45415,7 @@
</ul></li>
- </ol><h5 id=examples-1><span class=secno>5.4.3.1 </span>Examples</h5>
+ </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 -->
@@ -45354,7 +45557,7 @@
work.</p>
- <h5 id=examples-2><span class=secno>5.4.4.1 </span>Examples</h5>
+ <h5 id=examples-3><span class=secno>5.4.4.1 </span>Examples</h5>
<div class=example>
Modified: source
===================================================================
--- source 2009-09-11 19:22:25 UTC (rev 3812)
+++ source 2009-09-12 04:07:09 UTC (rev 3813)
@@ -33006,8 +33006,217 @@
</div>
+ <h4>Examples</h4>
+ <p><i>This section is non-normative.</i></p>
+ <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:</p>
+
+ <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>
+ <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>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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:</p>
+
+ <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">Forms</h3>
<p>Forms allow unscripted client-server interaction: given a form, a
More information about the Commit-Watchers
mailing list