Table of contents

HTML <tr> Tag

What is HTML <tr> Tag?

The HTML tr tag is used to define a row in an HTML table. It stands for “table row” and contains one or more table cells defined by the td or th tags. Each tr element represents a horizontal line of data within the table structure.

The tr tag is essential for organizing and displaying data in a structured format. It helps group table cells together and improves the readability of tabular data. You can use multiple tr tags inside a table element to create multiple rows.

Syntax of the HTML <tr> Tag

plaintext
<tr> Table data cells go here </tr>

The tr tag must always be placed inside the table element. It usually contains th (table headers) or td (table data) elements.

Examples of HTML <tr> Tag

Example 1: Basic HTML Table Row

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <tr>
    <th>Student Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>John</td>
    <td>90</td>
  </tr>
</table>

</body>
</html>

In this example, the first tr tag defines the header row with two headings: Student Name and Score. The second tr tag defines a row of data containing John and his score of 90.

Example 2: HTML Table Row with Scholar247 Data

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <tr>
    <th>Course</th>
    <th>Platform</th>
    <th>Rating</th>
  </tr>
  <tr>
    <td>HTML Basics</td>
    <td>Scholar247</td>
    <td>5 Stars</td>
  </tr>
  <tr>
    <td>CSS Essentials</td>
    <td>Scholar247</td>
    <td>4.8 Stars</td>
  </tr>
</table>

</body>
</html>

In this example, each tr tag creates a separate row in a table listing course details from Scholar247. It includes three rows: one for the header and two for data entries.

Attributes of the HTML <tr> Tag

The HTML tr tag supports the following attributes (mostly deprecated in modern HTML but still recognized by browsers):

• align – Specifies horizontal alignment of cell content (left, right, center).
• bgcolor – Sets background color for the table row.
• valign – Specifies vertical alignment of cell content (top, middle, bottom).
• class – Assigns a CSS class for styling.
• id – Assigns a unique ID to the row.
• style – Defines inline CSS for the row.

Modern practice recommends using CSS for styling instead of these older attributes.

Best Practices for HTML <tr> Tag

• Always nest tr tags inside the table tag.
• Use th for header cells and td for data cells.
• Keep the structure clean with proper indentation.
• Use CSS for styling rather than deprecated attributes like bgcolor.
• Ensure each row has the same number of table cells for consistency.
• Use descriptive headers to make tables accessible and readable.

FAQs About the HTML <tr> Tag

What is the purpose of the HTML tr tag?

The tr tag defines a single row in an HTML table that contains data cells or header cells.

Can I use the tr tag outside the table tag?

No. The tr tag must always be placed inside a table element; otherwise, it won’t render correctly in browsers.

Does the tr tag support styling?

Yes. You can use the style attribute or CSS classes to style table rows, such as changing background color or text alignment.

How many tr tags can I use in a table?

You can use as many tr tags as needed to display rows of data. Each tr tag represents one row.

Can I mix th and td tags inside the same tr?

Yes. A single tr can contain both th and td elements, but this is uncommon. Usually, th is used for headers and td for regular data cells.

HTML

Related Articles