HTML — Tables

Tables are for tabular data

A table displays data in rows and columns — schedules, prices, comparisons, statistics:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Ada</td>
        <td>36</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Grace</td>
        <td>45</td>
        <td>New York</td>
    </tr>
</table>

What the browser displays

Name	Age	City
Ada	36	London
Grace	45	New York

(Rows with a bold header line on top; borders come from CSS, not HTML.)

The three cell tags

Tag	Meaning	Renders as
<table>	The whole table	—
<tr>	Table row (wraps one row of cells)	—
<th>	Table header cell — labels a column	Bold, centered
<td>	Table data cell — ordinary content	Normal text

Reading order matters: build tables row by row. Each <tr> contains the cells for that row:

<table>
├── <tr> row 1
│   ├── <th>Name</th>
│   ├── <th>Age</th>
│   └── <th>City</th>
├── <tr> row 2
│   ├── <td>Ada</td>
│   ├── <td>36</td>
│   └── <td>London</td>
└── ...

Tables have no visible borders by default

A raw <table> shows aligned text but no lines. Add CSS to see structure:

<table style="border-collapse: collapse;">
    <tr>
        <th style="border: 1px solid #333; padding: 8px;">Name</th>
        <th style="border: 1px solid #333; padding: 8px;">Score</th>
    </tr>
    <tr>
        <td style="border: 1px solid #333; padding: 8px;">Ada</td>
        <td style="border: 1px solid #333; padding: 8px;">98</td>
    </tr>
</table>

border-collapse: collapse merges double borders into single clean ones — nearly always what you want. In practice this styling lives in your stylesheet, not inline:

table, th, td {
    border: 1px solid #999;
    border-collapse: collapse;
}
th, td { padding: 8px; }

Semantic table sections

For anything beyond tiny tables, mark header/body/footer regions:

<table>
    <thead>
        <tr><th>Product</th><th>Price</th></tr>
    </thead>
    <tbody>
        <tr><td>Coffee</td><td>$3</td></tr>
        <tr><td>Tea</td><td>$2.50</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td>$5.50</td></tr>
    </tfoot>
</table>

Why bother:

• Screen readers can repeat column headers while reading long body rows
• <thead> repeats when printing multi-page tables
• CSS can target sections independently (tbody tr:nth-child(even) zebra stripes)

The browser renders identically without them — they exist for machines.

A caption belongs to the table

<table>
    <caption>Quarterly Sales Summary</caption>
    ...
</table>

<caption> must be the first child of <table>; it announces the table's purpose before any cells are read aloud.

Cells that span multiple slots

Two attributes merge cells:

colspan — stretch across columns

<tr>
    <th colspan="2">Contact Information</th>
</tr>
<tr>
    <td>Email</td>
    <td>ada@example.com</td>
</tr>

Header "Contact Information" sits above both columns as one wide cell.

rowspan — stretch down rows

<tr>
    <td rowspan="2">Morning</td>
    <td>Yoga</td>
</tr>
<tr>
    <td>Breakfast</td>   <!-- first column already occupied -->
</tr>

"Morning" spans two rows in the schedule. Spanning is powerful and easy to overuse — if you're fighting a complex grid, reconsider whether this is really tabular data.

When NOT to use tables

The classic beginner crime: using tables for page layout (fake sidebars, aligning forms):

<!-- 1998 called — never do this -->
<table>
    <tr>
        <td>Sidebar</td>
        <td>Main content</td>
    </tr>
</table>

Layout is CSS's job (Flexbox/Grid). Tables for layout break screen readers, mobile screens, and maintainability. The rule:

Data with meaningful rows/columns → <table>
Visual page arrangement          → CSS layout

If removing all borders would make the content meaningless, it wasn't a table.

Mini Practice

Build schedule.html:

1. A weekly study plan: days across the top (<th>), subjects down the side
2. Use <caption>, <thead>, <tbody>
3. Style it via an internal <style> block: collapsed borders, padding, light zebra striping on body rows
4. Merge one weekend cell with colspan="2"
5. Verify it still makes sense read aloud row-by-row

Next: lists →