HTML <tr> Tag

What You’ll Learn

The <tr> tag defines a row in an HTML table. This guide covers syntax, td and th cells, thead/tbody structure, CSS row styling, accessibility, and best practices for beginners.

What Is the <tr> Tag?

The <tr> tag, short for table row, is a fundamental HTML element used to define a horizontal row within a table. It serves as the container for individual cells— either td (table data) or th (table header) elements.

Rows are nested inside table (via thead, tbody, or tfoot). Together, multiple tr elements form the grid structure that displays data on the web.

📝 Syntax

Use opening and closing tr tags to wrap the cells in one table row:

<tr>
  <!-- Your table data (td) or table header (th) elements go here -->
</tr>

Complete Table Row

<table>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Syntax Rules

• tr must be inside table, thead, tbody, or tfoot.
• Only td and th elements go directly inside tr.
• Each row should contain a consistent number of cells (accounting for colspan and rowspan on child cells).
• Use th in header rows and td in data rows for correct semantics.
• Style rows with CSS classes—avoid obsolete HTML attributes like align on tr.

🗃 Where <tr> Fits in a Table

⚖️ <tr> vs <td> vs <th>

Examples Gallery

Styled rows, basic data rows, and header rows with copy-ready code, live previews, and hands-on practice.

<style>
  tr.row-center td { text-align: center; background: #eff6ff; }
</style>

<tr class="row-center">
  <td>Column 1</td>
  <td>Column 2</td>
</tr>

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>

<thead>
  <tr>
    <th scope="col">Header 1</th>
    <th scope="col">Header 2</th>
  </tr>
</thead>

♿ Accessibility

• Use thead for header rows — Place tr with th cells inside thead so screen readers identify column headers.
• Add scope on th — Use scope="col" or scope="row" on header cells inside tr.
• Keep row structure consistent — Each data row should have the same number of logical columns.
• Do not use tables for layout — Reserve tr for genuine tabular data, not page grids.
• Add a caption — A caption on the parent table describes the whole table before rows are read.

💡 Best Practices