What is the purpose for HTML’s tbody?

by

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.

More Related Contents:

  1. How to design a table like this
  2. How do I keep two side-by-side div elements the same height?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Table fixed header and scrollable body
  5. Alternate table row color using CSS?
  6. How do you use colspan and rowspan in HTML tables?
  7. Table with fixed header and fixed column on pure css
  8. How to display scroll bar onto a html table
  9. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  10. how to make a whole row in a table clickable as a link?
  11. Using Position Relative/Absolute within a TD?
  12. Fixed Table Cell Width
  13. Is a DIV inside a TD a bad idea?
  14. Add border-bottom to table row
  15. How to make fill height
  16. HTML table with horizontal scrolling (first column fixed)
  17. Colspan all columns
  18. CSS table-cell equal width
  19. How to hide columns in HTML table?
  20. How to fix height of TR?
  21. Table scroll with HTML and CSS [duplicate]
  22. Merge two HTML table cells
  23. Min-width and max-height for table attributes
  24. Export HTML Table to Excel using ASP.NET
  25. Html table tr inside td
  26. HTML — two tables side by side [duplicate]
  27. Removing unwanted table cell borders with CSS
  28. Yet Another Divs vs Tables issue: Forms
  29. Styling the last td in a table with css
  30. Setting max-height for table cell contents

Leave a Comment