HTML <tr> Tag: Creating Table Rows Explained

Introduction to the <tr> tag

The <tr> tag is a fundamental HTML element that allows you to create rows in a table. Its name comes from "table row," which describes its exact purpose. Without this tag, it would be impossible to properly structure data within a table in HTML.

Whether you want to display a pricing table, a product list, a calendar, or statistics, mastering the <tr> tag is essential. It works closely with <td> tags (data cells) and <th> tags (header cells) to form a complete and semantically correct table structure. If you want to deepen your HTML knowledge, our comprehensive HTML course will guide you step by step in creating professional websites.

Syntax of the <tr> tag

Basic structure

The syntax of the <tr> tag is simple and intuitive. It opens with <tr> and closes with </tr>. Between these tags, you place your row's cells:

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

In this example, we created a row containing three cells. Each cell is defined by a <td> tag that represents a piece of table data.

Using with headers

When creating the first row of a table that contains column titles, you should use <th> instead of <td>:

<table>
  <tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Smith</td>
    <td>Mary</td>
    <td>mary@believemy.com</td>
  </tr>
</table>

The <th> cells are automatically bold and centered by default, visually distinguishing them from data cells.

Complete structure with sections

For better semantics and accessibility, we recommend using grouping elements:

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>20 hours</td>
      <td>Beginner</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>35 hours</td>
      <td>Intermediate</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>55 hours</td>
    </tr>
  </tfoot>
</table>

This structure uses <thead> for the header, <tbody> for the table body, and <tfoot> for the table footer. Each section contains one or more <tr> tags.

Attributes of the <tr> tag

Global attributes

The <tr> tag accepts all global HTML attributes. The most commonly used ones are:

Deprecated attributes

Some attributes were previously used directly on the <tr> tag, but they are now obsolete in HTML5. We strongly advise against using them:

Practical examples

Simple data table

Here is an example of a table displaying a list of Believemy learners:

<table>
  <thead>
    <tr>
      <th>Learner</th>
      <th>Course Enrolled</th>
      <th>Progress</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Martin</td>
      <td>HTML & CSS</td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Thomas Bernard</td>
      <td>JavaScript</td>
      <td>42%</td>
    </tr>
    <tr>
      <td>Sophie Dubois</td>
      <td>Python</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

This table features three columns and three data rows, plus a header row. Each <tr> represents a different learner.

Table with cell merging

You can merge cells horizontally with the colspan attribute or vertically with rowspan. These attributes are placed on cells (<td> or <th>), but they affect the row structure:

<table>
  <thead>
    <tr>
      <th rowspan="2">Category</th>
      <th colspan="2">Statistics</th>
    </tr>
    <tr>
      <th>Views</th>
      <th>Enrollments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Web Development</td>
      <td>15,420</td>
      <td>892</td>
    </tr>
    <tr>
      <td>Data Science</td>
      <td>8,750</td>
      <td>456</td>
    </tr>
  </tbody>
</table>

In this example, the "Category" cell spans two rows thanks to rowspan="2", while "Statistics" spans two columns with colspan="2".

Styling with CSS

To style your table rows, use CSS. Here is an example with alternating row colors:

<style>
  .believemy-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .believemy-table tr {
    border-bottom: 1px solid #e0e0e0;
  }
  
  .believemy-table tr:nth-child(even) {
    background-color: #f8f9fa;
  }
  
  .believemy-table tr:hover {
    background-color: #e3f2fd;
  }
  
  .believemy-table th,
  .believemy-table td {
    padding: 12px 15px;
    text-align: left;
  }
</style>

<table class="believemy-table">
  <thead>
    <tr>
      <th>Module</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Introduction to HTML</td>
      <td>Completed</td>
    </tr>
    <tr>
      <td>Semantic Tags</td>
      <td>In Progress</td>
    </tr>
    <tr>
      <td>HTML Tables</td>
      <td>Upcoming</td>
    </tr>
  </tbody>
</table>

The tr:nth-child(even) selector targets even rows, while tr:hover adds a hover effect.

Best practices

Semantic structure

Always use grouping elements for better accessibility:

• Place your header rows inside a <thead> element
• Group data rows within a <tbody>
• If you have summaries or totals, use <tfoot>

This structure helps screen readers understand your data organization and improves overall site accessibility.

Accessibility

To make your tables accessible to all users, follow these recommendations:

<table aria-describedby="table-description">
  <caption>Believemy Course List</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML Fundamentals</th>
      <td>15h</td>
      <td>Free</td>
    </tr>
  </tbody>
</table>
<p id="table-description">This table presents available courses.</p>

The scope attribute on header cells indicates whether they apply to a column (col) or a row (row).

Performance and maintenance

For large tables, consider:

• Limiting the number of displayed rows and implementing pagination
• Using reusable CSS classes rather than inline styles
• Avoiding nested tables that complicate maintenance
• Preferring meaningful identifiers to facilitate JavaScript manipulation

Common mistakes to avoid

Placing <tr> outside a table

The <tr> tag only makes sense inside a element. Never do this:

<!-- ❌ INCORRECT -->
<tr>
  <td>Orphan data</td>
</tr>

<!-- ✅ CORRECT -->
<table>
  <tr>
    <td>Data inside a table</td>
  </tr>
</table>

Mixing <th> and <td> without logic

Header cells (<th>) should only be used for titles, not to make text bold:

<!-- ❌ INCORRECT: using th for styling -->
<tr>
  <th>Important</th>
  <td>Value</td>
</tr>

<!-- ✅ CORRECT: use CSS for styling -->
<tr>
  <td class="important">Important</td>
  <td>Value</td>
</tr>

Forgetting to close tags

Even though some browsers tolerate omitting the closing </tr> tag, we recommend always closing it explicitly for clean and maintainable code.

Using tables for layout

Tables are meant for presenting tabular data, not for creating page layouts.

You can use the <tr> tag with complete confidence without worrying about compatibility.

Frequently asked questions about the <tr> tag

Yes, you can target a specific row in several ways. Use a CSS class (<tr class="my-row">), a unique identifier (<tr id="row-5">), or CSS selectors like tr:first-child, tr:last-child, or tr:nth-child(n). For example, tr:nth-child(3) targets the third row of the table.

Functionally, <tr> tags are identical regardless of their container. The difference is semantic: rows in <thead> represent table headers and are repeated when printing across multiple pages. Rows in <tbody> contain the main data. This distinction also helps assistive technologies better interpret your table.

To create a responsive table, you can use several CSS techniques. The simplest is to wrap your table in a container with overflow-x: auto to enable horizontal scrolling. For more advanced approaches, you can transform rows into stacked blocks on mobile using media queries, or use data-* attributes to display column headers before each cell.

To master HTML and create professional websites, we recommend taking our course to master HTML. You will discover all essential tags, accessibility best practices, and modern techniques for optimally structuring your web pages.