Code Example For Tr In HTML (To Organize Table Rows)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Tables: Find Out When To Use Them (And When To Avoid)
What does Code Example For Tr In HTML (To Organize Table Rows) 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.
Display
inline

Code Example

<table>
  <tr>
    <th>A</th>
    <th>Heading</th>
    <th>Row</th>
  </tr>
  <tr>
    <td>The first</td>
    <td>row of</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>The second</td>
    <td>row of</td>
    <td>table data</td>
  </tr>
</table>
AHeadingRow
The firstrow oftable data
The secondrow oftable 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.
Adam is a technical writer who specializes in developer documentation and tutorials.