Element of
What does <tr> do?
The <tr> element is used to group together <th> or <td> values into a single row of table heading or data values. The <tr> element may be a direct child of a <table> element or nested within a parent <thead>, <tfoot>, or <tbody> element.

Code Example

    <td>The first</td>
    <td>row of</td>
    <td>table data</td>
    <td>The second</td>
    <td>row of</td>
    <td>table data</td>
A Heading Row
The first row of table data
The second row of table data

Organizing Table Data

Data in HTML tables is organized into rows. This can be a bit confusing since the logical flow of data when the table is rendered is in columns. The basic building block of an HTML table is the table row. Table rows don't contain any data directly. Instead, table rows must be filled with table data (td) and table heading (th) cells. It is these table data and heading cells the actually hold the data presented in the table.

Organizing Table Rows

Simple tables often consist of a parent <table> element and a handful of table rows. However, complex tables can often benefit from greater organization and there are three elements that can be used to add greater structure to HTML tables:

  • <thead>: Use as a parent container for the row that contains table headings.
  • <tfoot>: Use as a parent container for one or more rows that contain summary data about the data in each table column.
  • <tbody>: Use as a parent container for the rows of data presented in a table.