- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 12 Sep 2009 04:02:22 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec In directory hutz:/tmp/cvs-serv20874 Modified Files: Overview.html Log Message: Table examples. (whatwg r3813) Index: Overview.html =================================================================== 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:02:32 UTC