tbody HTML tag - HTML Table Body
HTML tables can contain a header (thead), a body section and a footer (tfoot). We need to define where the table's body section starts with the opening <tbody> tag and ending it with the </tbody> closing tag.
Syntax
<table> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </tbody> </table>
We need to add the tbody tag to our HTML table only if it contains a header, a footer, or both.
We don't need to define the <tbody>...</tbody> section if the HTML table contains only cells, without header or footer.
<table> <thead> <tr> <th>Model</th> <th>Price</th> <th>Range</th> </tr> </thead> <tbody> <tr> <td>Model 3</td> <td>42,900</td> <td>272</td> </tr> <tr> <td>Model Y</td> <td>54,990</td> <td>330</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>USD</td> <td>miles</td> </tr> </tfoot> </table>
Model | Price | Range |
---|---|---|
Model 3 | 42,900 | 272 |
Model Y | 54,990 | 330 |
USD | miles |
A simple HTML table with header, body and footer sections.
tbody Is Not Mandatory
<table> <tr> <td>Model 3</td> <td>$42,900</td> </tr> <tr> <td>Model Y</td> <td>$54,990</td> </tr> </table>
Model 3 | $42,900 |
Model Y | $54,990 |
The tbody tag is negligible if there's no header or footer.
Tips And Tricks
- The <tbody> element must contain at least one <tr> table row tag.
- The <tbody> tag must be the child of a <table> element, after any <caption>, <colgroup>, and <thead> elements (if they exist).
- By default the thead , tbody, and tfoot elements will not affect the look and style of the table by default. You need to define CSS rules to style these elements!
- The hed-body-footer order will render correctly, even if you reverse or alter their order. For example, if you write tbody, then tfoot and finally the thead.
tbody Generator
The online table generator adds the <tbody> tag if there's a header or a footer defined.