Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the purpose for HTML's tbody?

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.

like image 834
Daniel Kivatinos Avatar asked May 28 '09 23:05

Daniel Kivatinos


People also ask

What is the purpose of the thead element and tbody element?

The thead, tbody, and tfoot elements in HTML are used to group table rows into logical sections based on their content.

What goes inside Tbody?

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.

Do you need tbody and thead?

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.

What is the difference between thead and tbody?

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


1 Answers

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.

like image 131
Paolo Bergantino Avatar answered Oct 11 '22 10:10

Paolo Bergantino