HTML Tables

HTML Tables: Structuring Data with Rows, Columns, and Headers

HTML tables display tabular information such as financial statements, product specifications, pricing plans, and data schedules. You create tables using the <table> element along with table rows (<tr>), table headers (<th>), and table data cells (<td>).

Table Elements and Semantic Structure

HTML tables use semantic container tags to group data rows logically:

<table>
    <caption>Quarterly Revenue Summary</caption>
    <thead>
        <tr>
            <th>Quarter</th>
            <th>Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1 2026</td>
            <td>$45,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$45,000</td>
        </tr>
    </tfoot>
</table>

Core table elements explained:

1. <table>: The outer wrapper for all tabular contents.
2. <thead>: Groups header rows containing category names (<th>).
3. <tbody>: Encloses the main data rows (<tr>) and cells (<td>).
4. <tfoot>: Contains summary rows (totals, averages, notes).
5. colspan & rowspan: Attributes used to merge cells across multiple columns or rows.

Table Hierarchy Structure

flowchart TD
    A["table"] --> B["caption (Optional Title)"]
    A --> C["thead (Header Section)"]
    A --> D["tbody (Data Rows Section)"]
    A --> E["tfoot (Summary / Totals Section)"]
    C --> C1["tr -> th (Header Cells)"]
    D --> D1["tr -> td (Data Cells)"]
    E --> E1["tr -> td (Total Cells)"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tables Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">

    <h2>Pricing Plans Comparison</h2>

    <!-- Styled accessible data table -->
    <table style="width: 100%; border-collapse: collapse; background-color: #1e293b; border-radius: 8px; overflow: hidden;">
        <caption style="padding: 10px; font-weight: bold; color: #38bdf8;">Plan Features Breakdown</caption>
        <thead>
            <tr style="background-color: #334155; text-align: left;">
                <th style="padding: 12px;">Feature</th>
                <th style="padding: 12px;">Starter</th>
                <th style="padding: 12px;">Pro</th>
            </tr>
        </thead>
        <tbody>
            <tr style="border-bottom: 1px solid #334155;">
                <td style="padding: 12px;">Projects</td>
                <td style="padding: 12px;">5</td>
                <td style="padding: 12px;">Unlimited</td>
            </tr>
            <tr style="border-bottom: 1px solid #334155;">
                <td style="padding: 12px;">Storage</td>
                <td style="padding: 12px;">10 GB</td>
                <td style="padding: 12px;">500 GB</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="background-color: #0f172a; font-weight: bold;">
                <td style="padding: 12px;">Monthly Price</td>
                <td style="padding: 12px;">$9/mo</td>
                <td style="padding: 12px;">$29/mo</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

Best Practices

• Never use tables for page layouts: Use Flexbox or CSS Grid for page layouts. Reserve <table> strictly for true 2D grid dataset presentation.
• Include scope="col" or scope="row" on header cells: Helps screen readers announce table headers clearly when navigating individual data cells.
• Use border-collapse: collapse in CSS: Prevents awkward double borders between adjacent table cells.

Self-Check Challenge

Create an HTML table listing 3 student names, their exam scores, and a final row merging 2 columns with colspan="2" to display the class average score!