Html Tr

HTML tr

Created By: chatGPT

In HTML, a <tr> element defines a table row in a table. It is used inside the <table> element and must be coupled with <th> (table header) and <td> (table data) tags. Each <tr> can contain one or more <th> or <td> elements that together represent the contents of the row.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

The <tr> tag can be styled using CSS, allowing you to change the background color, text alignment, and other properties of the row. This helps in creating a visually appealing table layout.

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

You can also use the <tr> element to group rows together for styling or scripting purposes. By wrapping certain rows in a <tr> tag, you can target them specifically with JavaScript or CSS.

<table>
    <tr class="grouped">
        <td colspan="2">Grouped Row</td>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>