HTML <tr> Tag

The HTML <tr>  (table row) tag is used to define a row of cells within a table. It serves as a container for <td>  (table data) and <th> (table header) elements, which represent the actual data and headings inside the table. Tables play an important role in displaying organized data, and the <tr>  tag helps in structuring these rows to present the information in a clean and readable format.

Syntax of the <tr> Tag

The basic syntax of the <tr> tag is straightforward. It is typically used within the <table> element, and it contains either <td> or <th> tags.

html
<tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
    <td>Table Data 3</td>
</tr>

In this example, a single row is created inside the table with three data cells. The <tr> tag is placed between the opening and closing <table> tags.

Attributes of the <tr> Tag

The <tr> tag supports a number of global attributes, which can be used to modify the behavior or styling of the table row. However, it does not have any specific attributes of its own.

Global Attributes:

AttributeDescription
classSpecifies one or more class names for styling purposes.
idSpecifies a unique id for the row.
styleAdds inline CSS styles to the row.
titleProvides additional information about the row, which can be displayed as a tooltip when hovered over.
hiddenHides the row from being displayed in the table without deleting it from the document.
data- attributes*Custom data attributes for use in scripts and applications.

While the <tr> tag itself doesn't have specific attributes, these global attributes can be used to enhance table rows with unique IDs, custom classes, or inline styling.

Examples of HTML <tr>  Tag

Example 1: Basic Table Row Using <tr>  and <td>.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Smith</td>
            <td>28</td>
        </tr>
    </table>
</body>
</html>

In this example, two table rows are created with the <tr>  tag, each containing three table data cells (<td>).

Example 2: Table Header and Data Rows.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Header and Data Rows</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Smith</td>
            <td>28</td>
        </tr>
    </table>
</body>
</html>

In this example, the first row contains header cells (<th>), while the following rows contain data cells (<td>), forming a complete table with both headers and data.

FAQs About HTML <tr> Tag

Q1: What is the purpose of the HTML <tr> tag?
A: The <tr> tag is used to define a row within a table. It serves as a container for <td> (table data) or <th> (table header) cells.

Q2: Can the <tr>  tag contain elements other than <td>  and <th>?
A: No, the <tr>  tag should only contain <td> or <th> elements. Other elements like paragraphs, images, or divs should not be placed inside a <tr> tag.

Q3: Does the <tr> tag have any specific attributes?
A: The <tr> tag itself doesn't have specific attributes, but it supports global attributes like class,id,and style for customizing its appearance and behavior.

Q4: Can I style a table row using the <tr>  tag?
A: Yes, you can apply CSS styles directly to the <tr>  tag using the style attribute or by referencing a class or ID for more advanced styling.

Q5: Is the <tr>  tag supported by all browsers?
A: Yes, the <tr> tag is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and others.

tools

HTML

Related Articles