HTML Tables

Mission

The community repair café is posting a two-day schedule. Visitors need to scan times and stations in rows and columns, not read a paragraph. Build the schedule so its labels and data stay connected.

What you'll build

A structured schedule table with a header row, at least two data rows, and one cell that spans multiple columns.

The table frame

A table is made of rows. Put each row in <tr>, then use <td> for ordinary data cells and <th> for labels.

<table>
    <tr>
        <th scope="col">Station</th>
        <th scope="col">Time</th>
    </tr>
    <tr>
        <td>Bike repair</td>
        <td>10:00</td>
    </tr>
</table>

scope="col" tells assistive technology that each header describes a column. Use scope="row" when a header describes the row instead.

Give the schedule sections

<thead> holds the column labels, <tbody> holds the repeated schedule entries, and <tfoot> can hold a summary. Those groups make the table easier to read and style.

<table>
    <thead>
        <tr><th scope="col">Station</th><th scope="col">Slots</th><th scope="col">Host</th></tr>
    </thead>
    <tbody>
        <tr><td>Bike repair</td><td>2</td><td>Mika</td></tr>
        <tr><td>Book mending</td><td>3</td><td>Ren</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">Open stations</td><td>2</td></tr>
    </tfoot>
</table>

colspan="2" lets the footer label cover two columns. rowspan="2" works the same way down across two rows.

Checkpoint

Run the page. You should see a header row above at least two schedule rows, plus one wider cell spanning columns. If the columns shift, count the cells in every row and check the colspan value.

Payoff

The repair café now has a schedule whose column headers label the times, days, and stations.