<tr>: The TR Element
Last updated: 2026-10-13
<tr>The TR Element
A table row, made of th (header) or td (data) cells.
| Category | Tables |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </tr> tag |
| Status | Standard |
📝 Syntax
<tr>
<td>cell</td>
</tr>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <tr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： tr lives only inside thead, tbody or tfoot; wrap data rows in tbody for easier scripting.
❓ FAQ
QMust tr be wrapped in tbody?
AThe source may omit it (the browser adds an implicit tbody), but explicit grouping is more controllable: after writing bare
<tr> under table, JS row operations and group styling all detour through that extra layer. Standardize on thead/tbody/tfoot.QCan tr be displayed as block?
AYes, but it breaks table layout — cells lose their arrangement. That is exactly the basis of the responsive-rows-as-cards trick, paired with td data-labels and ::before pseudo-elements. Otherwise, never touch tr's display.
QCan text go directly inside tr?
ANo — tr's content model allows only th/td and script-support elements; bare text is invalid HTML and the browser pushes it outside the table. Wrap every piece of text in
<td> or <th>.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
