HTML Tables

HTML Tables: Structuring Tabular Data with Semantic Tags

HTML tables organize structured, two-dimensional data into rows and columns—such as pricing comparisons, schedules, or database query results. Grouping rows inside thead and tbody helps browsers print headers cleanly and helps screen readers navigate cells accurately.

Core HTML Table Elements

Build every data table using these semantic building blocks:

• table: Root wrapper around the entire table.
• caption: Optional descriptive title announced before the table by screen readers.
• thead and tbody: Separate header rows from data rows (and tfoot for totals).
• tr: Defines a single table row.
• th: Defines a header cell (scope="col" for column headers, scope="row" for row headers).
• td: Defines a standard data cell.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tables Demo</title>
    <style>
        table { border-collapse: collapse; width: 100%; font-family: system-ui, sans-serif; }
        th, td { border: 1px solid #cbd5e1; padding: 10px 12px; text-align: left; }
        thead { background-color: #f1f5f9; }
    </style>
</head>
<body>
    <table>
        <caption>Monthly Hosting Plans</caption>
        <thead>
            <tr>
                <th scope="col">Plan</th>
                <th scope="col">Storage</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Starter</th>
                <td>20 GB SSD</td>
                <td>$5 / mo</td>
            </tr>
            <tr>
                <th scope="row">Pro</th>
                <td>100 GB NVMe</td>
                <td>$15 / mo</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Spanning Columns and Rows

Use colspan="2" on a th or td cell to stretch across two columns, or rowspan="2" to stretch down two rows. Always verify the total cell count per row stays consistent so columns stay aligned.

Common Mistakes to Avoid

• Using HTML tables for page layouts: Never build navbars or multi-column page grids with table. Use CSS Flexbox and CSS Grid instead.
• Using td for column headers: Always use th with scope="col" or scope="row" so screen readers pair each cell with its header.
• Forgetting border-collapse: collapse;: Without it, CSS borders render as ugly double lines around every cell.

Frequently Asked Questions

Should I wrap HTML tables for mobile scrolling?

Yes. Place wide tables inside a container with overflow-x: auto; so mobile users can scroll horizontally without breaking page width.

Are table border attributes like border="1" still valid?

Presentational attributes like border="1" and cellpadding are obsolete in HTML5. Style borders and cell spacing with CSS instead.