The <tr> HTML Element | Web Reference

Overview

The <tr> element is used to define a row of cells in an HTML table. These cells can be data cells (<td>), header cells (<th>), or a combination of both. Additionally, the element participates in the table model and is commonly found within sections like <thead>, <tbody>, or <tfoot>.

Examples and Usage

When creating HTML tables, the <tr> element serves as the foundational building block, organizing rows within the table. Within these rows, <th> elements denote headers, and <td> elements represent standard data cells.

The following example demonstrates a simple table that lists employees along with their salaries. The figures used are purely illustrative.

<table>
  <tr>
    <th>Employee</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Emily Smith</td>
    <td>$70,000</td>
  </tr>
  <tr>
    <td>Michael Jones</td>
    <td>$65,000</td>
  </tr>
  <tr>
    <td>Linda Garcia</td>
    <td>$72,000</td>
  </tr>
</table>

In this example, the <table> element encapsulates the entire table structure. Each <tr> element establishes a row, containing either header (<th>) or data (<td>) cells.

To style this table, we'll turn to some basic CSS to improve the readability and visual appeal.

table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
th, td {
  padding: 6px 12px;
}

The CSS rules set a 1-pixel border for the table, header, and data cells. The border-collapse: collapse; property merges adjacent cell borders, resulting in a cleaner, grid-like appearance. Padding is added within the cells for better visual separation.

Now, let's delve into a slightly more complex example. We'll introduce the rowspan and colspan attributes to span rows and columns. We also bring in <thead> and <tbody> elements to semantically structure the table.

<table>
  <thead>
    <tr>
      <th rowspan="2">Employee</th>
      <th colspan="2">Financials</th>
    </tr>
    <tr>
      <th>Salary</th>
      <th>Years of Service</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emily Smith</td>
      <td>$70,000</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Michael Jones</td>
      <td>$65,000</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Linda Garcia</td>
      <td>$72,000</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

In this enhanced example, <thead> and <tbody> elements segment the table into logical sections, making it easier to style and manage. The rowspan and colspan attributes in <th> cells allow headers to span across multiple rows or columns, offering a more organized presentation of data.

Next, let's style this table structure:

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-family: "Verdana", sans-serif;
}
th, td {
  border: 1px solid #ddd;
  padding: 6px 12px;
}
th {
  background-color: #f1f5f9;  /* Soft, pale blue */
}
td:last-child {
  text-align: center;  /* Center align for years of service */
}

In this updated stylesheet, we maintain foundational styles from the previous example but introduce a font change. The borders for th and td are defined separately, allowing for more customized styling. In addition, the "Years of Service" column is centered, and the header cells receive a soft, pale blue background for better visual distinction.

In other specific use cases, you can further leverage elements like <caption> for table titles, and <colgroup> for column grouping. It's also possible to use the scope attribute to specify whether a header cell is a header for a column, row, or group of columns or rows, improving the table's accessibility.

Attribute Breakdown

The <tr> element historically permitted various attributes for controlling alignment and background color. However, most of these attributes are now considered deprecated in favor of CSS. The element also includes all global HTML attributes.

Accessibility Aspects

The <tr> element has an implicit ARIA role of row. Detailed information on this can be found in the official specification.

Associated Elements

<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<caption>
<col>
<colgroup>

Additional Notes

Deprecated attributes like align, bgcolor, char, charoff, and valign were used to control alignment and background color for cells within the row. It's recommended to use modern CSS properties such as text-align, background-color, and vertical-align for these purposes. Being aware of the deprecated attributes may be useful when working with older websites.