Table Structure (<table>, <tr>, <th>, <td>)

HTML tables are used to display data in a structured, grid-like format. Each table is created using a combination of tags such as <table>, <tr>, <th>, and <td>. This article will cover the purpose of each of these elements, along with examples of how to create and use them in a table.

The <table> Element

The <table> element is used to define a table in HTML. It acts as a container for all the rows and cells in the table. Inside the <table> element, you can create rows with <tr> and add data cells within those rows.

Example of a Basic Table Structure:

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

In this example, <table> defines the table, and two rows are created using <tr> with data cells <td> inside each row.

The <tr> Element

The <tr> element stands for "table row" and is used to create a row within the table. Each row can contain multiple cells, which are created using the <td> (table data) or <th> (table header) elements.

The <td> Element

The <td> element represents "table data" and is used to define a cell within a row. It holds the data for each cell in the table. Each <td> element is typically placed inside a <tr>.

Example of <tr> and <td> Elements:

    <table>
        <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>
        

Here, two rows are created, each containing two cells. The first row contains "Row 1, Cell 1" and "Row 1, Cell 2," while the second row contains "Row 2, Cell 1" and "Row 2, Cell 2."

The <th> Element

The <th> element represents "table header" and is used to define a header cell in the table. Header cells are usually displayed in bold and centered by default. The <th> element is placed inside a <tr>, and it typically represents the headers for each column in a table.

Example of Using <th> for Table Headers:

    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
            <td>Los Angeles</td>
        </tr>
    </table>
        

In this example, the first row uses <th> to define the headers for each column: "Name," "Age," and "City." The following rows contain data for each individual using <td> elements.

Combining <table>, <tr>, <th>, and <td>

Here’s an example of a complete table with both headers and data cells:

    <table>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$1.50</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$0.75</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>$1.25</td>
            <td>15</td>
        </tr>
    </table>
        

This table includes a header row with <th> elements for "Product," "Price," and "Quantity." Each subsequent row represents a product entry with details in <td> cells.

Conclusion

The <table>, <tr>, <th>, and <td> elements in HTML provide a structured way to display data in a grid format. The <table> element creates the table, <tr> creates rows, <th> defines header cells, and <td> defines data cells. By understanding and using these elements effectively, you can organize and present data in a readable and accessible way on your web pages.