Web Development on Telegram: “🌐 Web Development Roadmap

🌐 Web Development Roadmap — Part 19

HTML Tables

Tables are used to display information in rows and columns.

For example, a website might use a table to display:

• Employee information

• Product details

• Exam results

• Prices

• Sales data

• Schedules

1. Basic Table Structure

A simple HTML table looks like this:

<table>
    <tr>
        <th>Name</th>
        <th>Role</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>Developer</td>
    </tr>

    <tr>
        <td>Priya</td>
        <td>Designer</td>
    </tr>
</table>

The structure is:

<table>
   ↓
<tr> → Table Row
   ↓
<th> → Header Cell
<td> → Data Cell

2. <table>

The <table> element defines the entire table.

<table>
    ...
</table>

Everything belonging to the table goes inside it.

3. <tr> — Table Row

<tr> creates a row.

<tr>
    <td>Rahul</td>
    <td>Developer</td>
</tr>

Each <tr> represents one horizontal row.

4. <th> — Table Header

<th> represents a header cell.

<tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
</tr>

Browsers typically display header cells in bold.

5. <td> — Table Data

<td> represents normal data.

<tr>
    <td>Rahul</td>
    <td>25</td>
    <td>Pune</td>
</tr>

6. Understanding the Structure

Consider:

<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
    </tr>

    <tr>
        <td>Amit</td>
        <td>Finance</td>
    </tr>
</table>

7. <thead>, <tbody> and <tfoot>

For larger or more structured tables, HTML provides sections.

<table>

    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>₹60,000</td>
        </tr>

        <tr>
            <td>Phone</td>
            <td>₹30,000</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>₹90,000</td>
        </tr>
    </tfoot>

</table>

The structure becomes:

<table>
 ├── <thead>
 │    └── Header rows
 │
 ├── <tbody>
 │    └── Main data rows
 │
 └── <tfoot>
      └── Summary/footer rows

8. colspan

colspan allows a cell to span multiple columns.

<tr>
    <td colspan="2">Total Sales</td>
</tr>

Here the cell occupies two columns.

9. rowspan

rowspan allows a cell to span multiple rows.

<tr>
    <td rowspan="2">Finance</td>
    <td>Rahul</td>
</tr>

<tr>
    <td>Priya</td>
</tr>