What are the main reasons someone would use HTML's tbody
in a table? Is it just for formatting purposes?
I use head
and body
generally; I haven't used thead
and tbody
.
The thead, tbody, and tfoot elements in HTML are used to group table rows into logical sections based on their content.
The tbody contains the body, or primary content, of an HTML table . Use it along with the thead and tfoot elements to add structure and semantic meaning to HTML tables. The tbody should contain the primary data presented in the table while the thead contains column headings and the tfoot contains summary data.
Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for. If a table is used for laying out content they are typically omitted.
<th> tag is used to give header in the cell of a table in HTML whereas <thead> tag is used to give the header of a group of a table.
To give semantic meaning to your table:
<table> <thead> <tr> <th>Person</th> <th>Amount</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Person1</td> <td>$5.99</td> <td>02/03/09</td> </tr> <tr> <td>Person2</td> <td>$12.99</td> <td>08/15/09</td> </tr> </tbody> </table>
According to the specification:
Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.
The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.
When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.
Besides the important semantic importance of this (think screen readers), you can then easily style your headers apart from your data rows. Another relevant example is jQuery plugins such as the Tablesorter (original, archived) plugin can then easily figure out what your data structure looks like.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With