The <tr> tag defines a table row. It goes inside <table>, and usually inside <thead>, <tbody>, or <tfoot>. Each <tr> contains one or more <th> (header) or <td> (data) cells.

<tr>

Step 2

Example: <table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Alice</td><td>95</td></tr></tbody></table>. Header row uses <th>; body rows use <td>. Multiple <tr> per section.

<tr><th scope="col">Name</th><th scope="col">Score</th></tr>

Step 3

Structure: table > thead/tbody/tfoot > tr > th/td. One row = one <tr>. Use <th> in thead rows for headers; use <td> in tbody/tfoot rows for data.

<thead>
  <tr><th>Name</th></tr>
</thead>
<tbody>
  <tr><td>Alice</td></tr>
</tbody>

Step 4

In the browser, each <tr> renders as one horizontal row. Screen readers use tr with th/td to navigate tables. Keep same number of cells per row for aligned columns.

<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>

Step 5

Which element defines a single row in a table?

<tr>

Step 6

Correct! <tr> is the row; <td> and <th> are cells inside the row. Use tr with th in thead and td in tbody.

<tr><td>Cell</td></tr>

Step 7

You now know <tr>. Complete the challenges below to master table rows!

tr.html

1 / 7

📋

Tutor:The <tr> tag defines a table row. It goes inside <table>, and usually inside <thead>, <tbody>, or <tfoot>. Each <tr> contains one or more <th> (header) or <td> (data) cells.

⭐ 0 EXP

TR Mastery

Table row: tr, th, td, thead, tbody.

Concept 1: The TR Tag

The <tr> tag defines a table row. It goes inside <table>, usually inside <thead>, <tbody>, or <tfoot>. Each tr contains <th> or <td> cells.

System Check

Which element defines a single row in a table?

Community Holo-Net

Table Row Patterns

Using tr, th, td? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <tr> Tag Documentation

Pascual Vila

Frontend Instructor.

The <tr> tag defines a table row. It goes inside <table>, and usually inside <thead>, <tbody>, or <tfoot>. Each <tr> contains one or more <th> (header) or <td> (data) cells. Use th in header rows and td in body rows for semantic structure and robust accessibility.

Semantic Structure

The hierarchy is clear: Table > thead/tbody/tfoot > tr > th/td. One semantic row equals one <tr>. Employ <th> in thead rows to denote headers; utilize <td> in tbody and tfoot rows for data insertion. Ensure the same number of cells per row for perfectly aligned columns.

Accessibility Best Practices

Always nest <tr> inside a <table> context (and optimally inside thead, tbody, or tfoot). Couple your <th> elements with the scope attribute in header rows to explicitly guide screen readers.

TR Tag Glossary

<tr>: Table row. Contains <th> or <td> cells. Lives inside table, usually logically partitioned into thead, tbody, or tfoot.
th / td: th = header cell (use in thead rows). td = data cell (use in tbody/tfoot rows). Each tr requires one or more of these elements.
thead / tbody / tfoot: Structural sections that group <tr> rows. thead maps header rows (th), tbody holds data body rows (td), and tfoot contains summary footer rows (td).

📖 INDEX