Skip to content
Permalink
Browse files
[ac] (2) Allow <td> in <thead>
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10147

git-svn-id: http://svn.whatwg.org/webapps@5434 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Sep 8, 2010
1 parent 0dd3a0d commit 9d40f713fe3e6667e372cc0c319f8ad98023cf14
Showing with 120 additions and 6 deletions.
  1. +40 −2 complete.html
  2. +40 −2 index
  3. +40 −2 source

</div>

<div class=example>

<p>This example shows a <code><a href=#the-thead-element>thead</a></code> element being used.
Notice the use of both <code><a href=#the-th-element>th</a></code> and <code><a href=#the-td-element>td</a></code> elements
in the <code><a href=#the-thead-element>thead</a></code> element: the first row is the headers,
and the second row is an explanation of how to fill in the
table.</p>

<pre>&lt;table&gt;
&lt;caption&gt; School auction sign-up sheet &lt;/caption&gt;
<strong> &lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;label for=e1&gt;Name&lt;/label&gt;
&lt;th&gt;&lt;label for=e2&gt;Product&lt;/label&gt;
&lt;th&gt;&lt;label for=e3&gt;Picture&lt;/label&gt;
&lt;th&gt;&lt;label for=e4&gt;Price&lt;/label&gt;
&lt;tr&gt;
&lt;td&gt;Your name here
&lt;td&gt;What are you selling?
&lt;td&gt;Link to a picture
&lt;td&gt;Your reserve price
</strong> &lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Ms Danus
&lt;td&gt;Doughnuts
&lt;td&gt;&lt;img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus"&gt;
&lt;td&gt;$45
&lt;tr&gt;
&lt;td&gt;&lt;input id=e1 type=text name=who required form=f&gt;
&lt;td&gt;&lt;input id=e2 type=text name=what required form=f&gt;
&lt;td&gt;&lt;input id=e3 type=url name=pic form=f&gt;
&lt;td&gt;&lt;input id=e4 type=number step=0.01 min=0 value=0 required form=f&gt;
&lt;/table&gt;
&lt;form id=f action="/auction.cgi"&gt;
&lt;input type=button name=add value="Submit"&gt;
&lt;/form&gt;</pre>

</div>


<h4 id=the-tfoot-element><span class=secno>4.9.7 </span>The <dfn><code>tfoot</code></dfn> element</h4>

elements, but only if there are no <code><a href=#the-tbody-element>tbody</a></code> elements that
are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
<dt>Content model:</dt>
<dd>When the parent node is a <code><a href=#the-thead-element>thead</a></code> element: Zero or more <code><a href=#the-th-element>th</a></code> elements</dd>
<dd>Otherwise: Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
<dd>Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
42 index

</div>

<div class=example>

<p>This example shows a <code><a href=#the-thead-element>thead</a></code> element being used.
Notice the use of both <code><a href=#the-th-element>th</a></code> and <code><a href=#the-td-element>td</a></code> elements
in the <code><a href=#the-thead-element>thead</a></code> element: the first row is the headers,
and the second row is an explanation of how to fill in the
table.</p>

<pre>&lt;table&gt;
&lt;caption&gt; School auction sign-up sheet &lt;/caption&gt;
<strong> &lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;label for=e1&gt;Name&lt;/label&gt;
&lt;th&gt;&lt;label for=e2&gt;Product&lt;/label&gt;
&lt;th&gt;&lt;label for=e3&gt;Picture&lt;/label&gt;
&lt;th&gt;&lt;label for=e4&gt;Price&lt;/label&gt;
&lt;tr&gt;
&lt;td&gt;Your name here
&lt;td&gt;What are you selling?
&lt;td&gt;Link to a picture
&lt;td&gt;Your reserve price
</strong> &lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Ms Danus
&lt;td&gt;Doughnuts
&lt;td&gt;&lt;img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus"&gt;
&lt;td&gt;$45
&lt;tr&gt;
&lt;td&gt;&lt;input id=e1 type=text name=who required form=f&gt;
&lt;td&gt;&lt;input id=e2 type=text name=what required form=f&gt;
&lt;td&gt;&lt;input id=e3 type=url name=pic form=f&gt;
&lt;td&gt;&lt;input id=e4 type=number step=0.01 min=0 value=0 required form=f&gt;
&lt;/table&gt;
&lt;form id=f action="/auction.cgi"&gt;
&lt;input type=button name=add value="Submit"&gt;
&lt;/form&gt;</pre>

</div>


<h4 id=the-tfoot-element><span class=secno>4.9.7 </span>The <dfn><code>tfoot</code></dfn> element</h4>

elements, but only if there are no <code><a href=#the-tbody-element>tbody</a></code> elements that
are children of the <code><a href=#the-table-element>table</a></code> element.</dd>
<dt>Content model:</dt>
<dd>When the parent node is a <code><a href=#the-thead-element>thead</a></code> element: Zero or more <code><a href=#the-th-element>th</a></code> elements</dd>
<dd>Otherwise: Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
<dd>Zero or more <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> elements</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
42 source

</div>

<div class="example">

<p>This example shows a <code>thead</code> element being used.
Notice the use of both <code>th</code> and <code>td</code> elements
in the <code>thead</code> element: the first row is the headers,
and the second row is an explanation of how to fill in the
table.</p>

<pre>&lt;table>
&lt;caption> School auction sign-up sheet &lt;/caption>
<strong> &lt;thead>
&lt;tr>
&lt;th>&lt;label for=e1>Name&lt;/label>
&lt;th>&lt;label for=e2>Product&lt;/label>
&lt;th>&lt;label for=e3>Picture&lt;/label>
&lt;th>&lt;label for=e4>Price&lt;/label>
&lt;tr>
&lt;td>Your name here
&lt;td>What are you selling?
&lt;td>Link to a picture
&lt;td>Your reserve price
</strong> &lt;tbody>
&lt;tr>
&lt;td>Ms Danus
&lt;td>Doughnuts
&lt;td>&lt;img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
&lt;td>$45
&lt;tr>
&lt;td>&lt;input id=e1 type=text name=who required form=f>
&lt;td>&lt;input id=e2 type=text name=what required form=f>
&lt;td>&lt;input id=e3 type=url name=pic form=f>
&lt;td>&lt;input id=e4 type=number step=0.01 min=0 value=0 required form=f>
&lt;/table>
&lt;form id=f action="/auction.cgi">
&lt;input type=button name=add value="Submit">
&lt;/form></pre>

</div>


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

elements, but only if there are no <code>tbody</code> elements that
are children of the <code>table</code> element.</dd>
<dt>Content model:</dt>
<dd>When the parent node is a <code>thead</code> element: Zero or more <code>th</code> elements</dd>
<dd>Otherwise: Zero or more <code>td</code> or <code>th</code> elements</dd>
<dd>Zero or more <code>td</code> or <code>th</code> elements</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
<dt>DOM interface:</dt>

0 comments on commit 9d40f71

Please sign in to comment.