HTML Tables

HTML tables are a powerful way to present structured data in an organized format. They allow you to display information in rows and columns, making it easier to read and interpret. In this guide, we’ll explore HTML table elements (<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>), their attributes, and real-world examples.

What is an HTML Table?

An HTML table is created using the <table> element, which consists of rows (<tr>) and columns (<td> for data and <th> for headers). Additional elements like <thead>, <tbody>, and <tfoot> help in structuring large tables.

Basic Structure of an HTML Table

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>In Stock</td>
        </tr>
        <tr>
            <td>Headphones</td>
            <td>$199</td>
            <td>Out of Stock</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Updated on 2025-02-17</td>
        </tr>
    </tfoot>
</table>

Output:

HTML Table Tags and Their Uses

Below are the key HTML table elements:

HTML Table Attributes

HTML table elements support several attributes that control the appearance and behavior of the table. Here’s a list of commonly used attributes:

Advanced HTML Table Example

Here’s an advanced table example that includes row and column merging (colspan & rowspan):

<table border="1" cellpadding="5" cellspacing="2" width="80%">
    <thead>
        <tr>
            <th colspan="3">Sales Report - 2025</th>
        </tr>
        <tr>
            <th>Product</th>
            <th>Units Sold</th>
            <th>Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smartphone</td>
            <td>500</td>
            <td>$250,000</td>
        </tr>
        <tr>
            <td>Tablet</td>
            <td>300</td>
            <td>$120,000</td>
        </tr>
        <tr>
            <td rowspan="2">Accessories</td>
            <td>150</td>
            <td>$15,000</td>
        </tr>
        <tr>
            <td>200</td>
            <td>$20,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Revenue: $405,000</td>
        </tr>
    </tfoot>
</table>

Explanation of Features:

• colspan="3": Merges three columns into one in the header.
• rowspan="2": Merges two rows into one for “Accessories”.
• cellpadding="5" & cellspacing="2": Enhances spacing inside and between cells.

Best Practices for Using HTML Tables

1. Use <thead>, <tbody>, and <tfoot> for better structure and accessibility.
2. Use <th> for column headers to make data more readable and SEO-friendly.
3. Avoid excessive use of border, cellpadding, and cellspacing, as modern CSS handles styling better.
4. Make tables responsive using CSS (overflow: auto; for scrolling).
5. Use colspan and rowspan wisely to merge relevant cells without losing readability.

Making HTML Tables Responsive

By default, HTML tables are not mobile-friendly. You can use CSS to make them responsive:

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}

@media screen and (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

This ensures that tables remain scrollable on smaller screens, improving user experience.

Conclusion

HTML tables are an essential part of web design, used for organizing data efficiently. By understanding elements like <table>, <tr>, <td>, <th>, <thead>, <tbody>, and <tfoot>, you can create well-structured and visually appealing tables.

Using attributes like colspan, rowspan, border, and CSS styling, you can enhance your tables for better usability and responsiveness.

If you’re working on data-heavy websites, pricing tables, or comparison charts, mastering HTML tables is a must!

Further Reading:

• MDN Web Docs: HTML Tables
• W3Schools: HTML Tables