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