Tables in HTML Language

Tables are a fundamental element in web development, used for displaying structured data in a grid-like format. Whether you’re creating a simple schedule or a complex financial

report, HTML provides a robust way to design and present tables. In this guide, we’ll explore the basics of creating tables in HTML, along with examples to illustrate each concept.

Basic Table Structure

The fundamental structure of an HTML table consists of three main elements: <table>, <tr>, and <td>. Here’s a brief explanation of each:

1. <table>: The container for the entire table.
2. <tr>: Stands for “table row” and is used to define a row within the table.
3. <td>: Short for “table data,” represents individual cells within a row.

Example:

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

In this example, we have a simple table with two rows and two columns. Each <tr> defines a row, and within each row, we use <td> to define the cells’ content.

Table Headings

Tables often include a header row to label the columns. To define header cells, use the <th> element instead of <td> within the <tr> element.

Example:

<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>Alice</td>
        <td>25</td>
        <td>Canada</td>
    </tr>
</table>

In this example, the first row contains header cells enclosed within <th>, providing labels for each column.

Table Attributes

HTML tables support various attributes to modify their appearance and behavior. Some commonly used attributes include:

• border: Sets the table border width.
• width: Defines the table’s width.
• cellspacing and cellpadding: Control the spacing between cells and cell content.
• align: Aligns the table within its container.

Example:

<table border="1" width="50%" cellspacing="10" cellpadding="5" align="center">
    <!-- Table content goes here -->
</table>

These attributes help you customize the appearance of your table to match your website’s design.

Spanning Cells

You can merge cells both horizontally and vertically using the colspan and rowspan attributes.

Example:

<table border="1">
    <tr>
        <td rowspan="2">Merged Cell</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

In this example, the first cell spans two rows using rowspan="2".