Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does HTML5 ban th cells from tbody?

I have the following markup as a part of a Razor view:

<table>   <caption>Presidents</caption>   <thead>     <tr>       <th scope="col">Name</th>       <th scope="col">Born</th>       <th scope="col">Died</th>     </tr>   </thead>   <tbody>     <tr>       <th scope="row">Washington</th>       <td>1732</td>       <td>1799</td>     </tr>     <!-- etc -->   </tbody> </table> 

With the "target schema for validation" set to HTML5, Visual Studio complains thusly:

Warning 1 Validation (HTML5): Element 'th' must not be nested within element 'tbody tfoot'.

Is this really true? If so, could someone link to the spec?

My understanding was that using <th> for row headers was not just legal but encouraged. It certainly seems fairly common, I could link dozens of tutorials explaining (seemingly sensibly) that it helps with accessibility.

Is this a VS bug? A real change coming with HTML5 (a good one? a bad one?)? What's the story?

like image 478
Doug McClean Avatar asked Apr 01 '11 04:04

Doug McClean


People also ask

Can you have th in Tbody?

The HTML5 spec only requires that it be inside a tr , and the spec actually includes an example with a th nested inside a tbody . Show activity on this post. Generally a TH in a THEAD will have a scope value of "col" while a TH in a TBODY will have a scope value of "row" .

Can HTML table have multiple tbody?

You can create multiple sections within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table! Because of that, you need to use a <tr> filled with <th> elements to create headers within each <tbody> .

Does HTML need Tbody?

Quoting the HTML 4 spec: "The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted."

What is tbody tag in HTML5?

The <tbody> tag is used to group the body content in an HTML table. The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.


1 Answers

My understanding was that using <th> for row headers was not just legal but encouraged

As far as I know, this was always legal in HTML 4 (and possibly its predecessors), and hasn't changed in HTML5.

W3C's HTML5 validator, while still experimental, reports no warnings or errors. Then again, I'm sure the HTML5 validation Visual Studio is using is experimental as well since HTML5 itself hasn't yet been finalized.

The HTML5 spec on marking up tabular data, specifically section 4.9.13, shows the use of <th> within <tbody> and <tfoot> to scope row data:

<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> 

So it's perfectly legitimate to have <th> elements inside <tr> elements inside either a <tbody> or <tfoot>. As it should be anyway, since table headings aren't just found on table headers.

like image 181
BoltClock Avatar answered Sep 19 '22 03:09

BoltClock