Table with thead, tbody, tfoot, and captionsuggest change
HTML also provides the tables with the
<caption> elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling.
When printing out a table that doesn’t fit onto one (paper) page, most browsers repeat the contents of
<thead> on every page.
There’s a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.
<table> <caption>Table Title</caption> <!--| caption is the first child of table |--> <thead> <!--======================| thead is after caption |--> <tr> <th>Header content 1</th> <th>Header content 2</th> </tr> </thead> <tbody> <!--======================| tbody is after thead |--> <tr> <td>Body content 1</td> <td>Body content 2</td> </tr> </tbody> <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |--> <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |--> <tr> <td>Footer content 1</td> <td>Footer content 2</td> </tr> </tfoot> </table>
The following example’s results are demonstrated twice–the first table lacks any styles, the second table has a few CSS properties applied:
border*. The styles are provided as a visual guide and is not an essential aspect of the topic at hand.
Element | Styles Applies
<caption> | Yellow text on black background. |
<thead> | Bold text on purple background.
<tbody> | Text on blue background.
<tfoot> | Text on green background.
<th> | Orange borders.
<td> | Red borders.