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>

Semantic Table Elements

Use semantic table elements to make your data more accessible and easier to understand. These elements help browsers, screen readers, and search engines understand which cells are headers, which cells contain data, and how rows and columns relate to each other.

• <caption> – brief description of the table
• <thead>, <tbody>, <tfoot> – group rows logically
• <th> – header cells (with optional scope attribute)
• <colgroup> and <col> – style or identify full columns

<table>
    <caption>Monthly Team Performance Report</caption>
    <colgroup>
        <col style="background-color: #f2f8ff;">
        <col span="2">
        <col style="background-color: #f2fff7;">
    </colgroup>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>

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).