🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<tr>

AI & DATA SCIENCE // tr-tag

The <tr> element represents a single row of cells within a <table>, containing <th> and/or <td> children.

Syntax

<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>

Deep Dive Course

**`<tr>`** ("table row") is a horizontal row within a table, and its direct children must be `<th>` or `<td>` cells (or, in obscure cases, nothing else). Rows are typically grouped inside `<thead>`, `<tbody>`, or `<tfoot>` sections for clearer structure, though a `<table>` can also contain `<tr>` rows directly without those grouping elements for simple tables.

1Understanding <tr>

`<tr>` ("table row") is a horizontal row within a table, and its direct children must be <th> or <td> cells (or, in obscure cases, nothing else). Rows are typically grouped inside <thead>, <tbody>, or <tfoot> sections for clearer structure, though a <table> can also contain <tr> rows directly without those grouping elements for simple tables.

💡

Every <tr> in a table should ideally have the same number of cells (accounting for colspan/rowspan) — mismatched cell counts across rows can make a table's structure ambiguous to both browsers and screen readers.

editor.html
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>
localhost:3000

2Practical Example

Here is a real-world application of <tr> showing how it is used in production HTML.

editor.html
<!-- A row using colspan to merge cells -->
<tr>
  <td colspan="2">Spans two columns</td>
</tr>
localhost:3000

3Best Practices

Follow these guidelines when working with <tr>:

1. Keep the number of cells consistent across rows in the same table (accounting for colspan/rowspan)

2. Group rows into <thead>/<tbody>/<tfoot> for larger, clearer tables

3. Use <th> for the row's header cell when a row itself acts as a label (e.g. a row header)

⚠️

Tip: Every <tr> in a table should ideally have the same number of cells (accounting for colspan/rowspan) — mismatched cell counts across rows can make a table's structure ambiguous to both browsers and screen readers.

editor.html
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>
localhost:3000

Examples

Example 01Basic Usage
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>
Example 02Advanced Example
<!-- A row using colspan to merge cells -->
<tr>
  <td colspan="2">Spans two columns</td>
</tr>

Best Practices

  • Keep the number of cells consistent across rows in the same table (accounting for colspan/rowspan)
  • Group rows into // for larger, clearer tables
  • Use for the row's header cell when a row itself acts as a label (e.g. a row header)

Interview Question

Must every <tr> in a table have exactly the same number of <td>/<th> cells?

Hint: Think about colspan and rowspan, and what 'the same number of columns' really means once those are involved.

Not literally the same raw cell COUNT, but the same effective column coverage once colspan/rowspan are accounted for — a row with 3 plain cells occupies the same 3 columns as a row with 1 cell using colspan="3". Browsers are lenient about mismatches and will render something regardless, but a table where the effective columns don't line up produces a visually and semantically broken grid, so keeping them consistent (accounting for spans) is important for a table to make sense.

Exercises

EasyPractice using <tr> in a real scenario.
View Solution
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$9.99</td>
  </tr>
</table>

Frequently Asked Questions

Must every <tr> in a table have exactly the same number of <td>/<th> cells?

Not literally the same raw cell COUNT, but the same effective column coverage once colspan/rowspan are accounted for — a row with 3 plain cells occupies the same 3 columns as a row with 1 cell using colspan="3". Browsers are lenient about mismatches and will render something regardless, but a table where the effective columns don't line up produces a visually and semantically broken grid, so keeping them consistent (accounting for spans) is important for a table to make sense.

Related Functions

table-tagth-tagtd-tag