Is it valid to put h3 (or any heading) inside td tags?
Asked Answered
P

2

9

The question is asked for TH tags, but I couldn't find one for TD tags.

Can I put headings inside <td> tags?

Paraffinic answered 9/10, 2013 at 10:3 Comment(1)
yes. See this topic: #12096303Soso
I
9

thead is not h3, if you use h3 inside td element, it is absolutely fine, but if you use h3 as a direct child to tr is invalid.

Inorder to use thead you can use it like this

<table>
   <thead>
      <tr>
         <th>This is table head and not h3</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Foot Cell</td>
      </tr>
   </tfoot>
   <tbody>
       <tr>
          <td>
             <h3>It's completely valid to put your h3 here</h3>
             Table cell
             <p>You can also use p tag here
           </td>
       </tr>
   </tbody>
</table>

But if you do it something like this, is invalid

<table>
   <tr>
      <h3>It's invalid</h3>
      <td>This is a cell</td>
   </tr>
</table>

You can always check here whether your markup is valid or not.

Isabel answered 9/10, 2013 at 10:6 Comment(1)
Thanks for this descriptive answer.Paraffinic
T
7

No elements can appear inside a tag. Inside a td element, i.e. between the <td> tag and the corresponding (possibly implicit) </td> tag, the content model is “flow content”. This effectively means anything that may appear inside the document body in general. So syntactically, h3 is allowed.

The content model of th is the same as that of td in HTML4, but in HTML5 CR, it is more limited and excludes heading elements, among other things.

The content model of the tr element (table row) allows only th and td children, so nothing else may appear directly inside it, only as wrapped in th or td.

These are the syntax rules and they do not imply that all content would be meaningful. In particular, a heading element inside th would be rather anomalous (what would it be a heading for? the th markup itself means a header cell), whereas in a td cell it could make perfect sense (e.g., in a table that compares two texts piecewise side by side).

Tun answered 9/10, 2013 at 11:26 Comment(1)
Note for HTML5: the content model of th is different than the one of td. th has: "Flow content […] with no […] heading content descendants".Forehead

© 2022 - 2024 — McMap. All rights reserved.