HTML Tables

Introduction to HTML Tables

Tables are built using a combination of elements: <table>, <tr>, <th>, and <td>, often organized into <thead>, <tbody>, and <tfoot>. When used correctly, tables make it easy for users and assistive technologies to scan and compare data.

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Language</th>
            <th>Type</th>
            <th>Usage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Markup</td>
            <td>Structure of web pages</td>
        </tr>
    </tbody>
</table>

All <table> Attributes

In HTML5, the <table> element has one legacy presentational attribute (border) plus all global attributes. Layout, spacing, borders, and width should be handled with CSS—not obsolete HTML attributes.

<!-- Avoid border="", cellpadding="", width="" on table -->
<table class="data-table">
    <caption>Product Inventory</caption>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

<style>
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th,
.data-table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
}
</style>

Uses of Table Semantic Tags

Semantic table tags describe what each part of the table means, not just how it looks. Screen readers use them to announce headers with data cells; browsers use them for default styling and printing; developers use them to write clearer, maintainable markup.

Typical semantic structure

Elements must appear in this order inside <table>: caption → colgroup → thead → tfoot → tbody (one or more). Each row (tr) holds cells (th or td).

<table>
    <caption>Monthly Team Performance Report</caption>

    <colgroup>
        <col class="col-team">
        <col span="2" class="col-metrics">
        <col class="col-status">
    </colgroup>

    <thead>
        <tr>
            <th scope="col">Team</th>
            <th scope="col">Tasks Completed</th>
            <th scope="col">Pending Tasks</th>
            <th scope="col">Status</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>81</td>
            <td>15</td>
            <td>Overall Good</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <th scope="row">Frontend</th>
            <td>42</td>
            <td>6</td>
            <td>On Track</td>
        </tr>
        <tr>
            <th scope="row">Backend</th>
            <td>39</td>
            <td>9</td>
            <td>Needs Review</td>
        </tr>
    </tbody>
</table>

Real-world uses of each semantic tag

• <caption> — Names the table (“Q2 Sales by Region”) so users know what they are reading without scanning every cell.
• <thead> — Holds column headers; screen readers repeat them when navigating down a column.
• <tbody> — Separates data from headers/footers; useful when JavaScript adds or removes rows dynamically.
• <tfoot> — Shows totals or summary rows (invoice total, grade average) that apply to all body rows.
• <th scope="col"> — Labels a column (“Price”, “Quantity”).
• <th scope="row"> — Labels a row (“January”, “Product A”) when the first column is a row header.
• <colgroup> / <col> — Style or width entire columns (e.g. narrow “ID” column, wide “Description” column) without touching every cell.

Rowspan and Colspan

rowspan merges cells vertically (across rows), and colspan merges cells horizontally (across columns). These attributes are useful for grouped headings, schedules, and report-style tables.

<tr>
    <th rowspan="2">Monday</th>
    <td>10:00 - 11:00</td>
    <td>HTML</td>
</tr>
<tr>
    <td>11:15 - 12:15</td>
    <td>CSS</td>
</tr>

<tr>
    <th>Student</th>
    <th colspan="3">Marks</th>
</tr>

Responsive Tables

On small screens, wide tables can become difficult to read. A simple approach for responsiveness is to wrap your table in a container that allows horizontal scrolling. Bootstrap’s .table-responsive class does this for you.

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

Accessible Tables

For accessibility, always relate header cells and data cells clearly.

• Use <th scope="col"> for column headers.
• Use <th scope="row"> for row headers when appropriate.
• Provide a <caption> for context.

Best Practices

• Use tables only for tabular data, not for page layout.
• Keep tables simple; avoid overly complex nesting.
• Use CSS for styling (borders, colors, spacing).
• Ensure tables are readable on smaller screens (consider responsive patterns).