<td> : Table Data Cell element

by

Introduction

The <td> element in HTML stands for “Table Data Cell.” It’s used to define a cell within a table to hold data. Each <td> element represents a single cell within a table row (<tr>).

Here’s an example of how you might use the <td> element to create a table data cell:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Data Cell 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 <td> element represents a cell in the table.
  • Each <td> element is contained within a <tr> (table row) element.
  • The first row typically contains header cells, denoted by <th> elements.
  • 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. Each data cell (<td>) holds a piece of information within the table.

Leave a Comment