[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