<tr> Tag in HTML | Table Row Element

The <tr> tag in HTML is used to define a single row within a table. It is placed inside the <table> tag and typically contains <td> (table data) or <th> (table header) elements to specify individual cells in the row.

Key Points on <tr> Tag:

• Table Rows: The <tr> tag is used to create rows in an HTML table.
• Cell Structure: Each <tr> tag contains <td> or <th> elements for data and headers.
• Placement: The <tr> tag must be used within <table>, <thead>, <tbody>, or <tfoot> sections.
• Row Styling: Styling can be applied to specific rows using CSS to highlight them or distinguish them from other rows.

Syntax of <tr> Tag:

<table>
            <tr>
                <td>Row Data 1</td>
                <td>Row Data 2</td>
            </tr>
        </table>

Example of Using <tr> Tag:

This example demonstrates a table with two rows, each containing two cells.

<table border="1">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
            </tr>
        </table>

Attributes of <tr> Tag:

• Global Attributes: The <tr> tag supports global HTML attributes like id, class, style, and title for additional styling and identification.
• Event Attributes: JavaScript events such as onclick, onmouseover, and onmouseout can be applied to <tr> elements.

Best Practices:

• Use Proper Headers: Use <th> tags within <tr> for table headers to enhance accessibility.
• CSS Styling: Apply CSS styles to alternate rows for better readability.
• Separate Sections: Use <thead>, <tbody>, and <tfoot> to structure tables logically.

The <tr> tag is essential for creating rows in HTML tables, allowing structured data organization. Using this tag along with <td> and <th> helps in creating readable, organized tables.