<tr> : Table Row element

by

Introduction

The <tr> element in HTML stands for “Table Row.” It’s used to define a row within a table. Each row in an HTML table consists of one or more table data cells (<td>) or table header cells (<th>).

Here’s an example of how you might use the <tr> element to create a table row:

<!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>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Example Table</h2>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>David</td>
            <td>40</td>
            <td>UK</td>
        </tr>
    </table>
</body>
</html>

Output :

In this example:

  • Each <tr> element represents a row in the table.
  • Within each <tr>, we have table cells represented by <td> (data cells) or <th> (header cells).
  • The first <tr> typically contains header cells denoted by <th>, while subsequent <tr> elements contain data cells denoted by <td>.
  • CSS is used to style the table, including setting border styles, cell padding, and alignment.

This results in a simple table with three columns: Name, Age, and Country, and three rows of data.

Leave a Comment