Day 5: HTML Tables

Tables are for tabular data (spreadsheets, pricing lists, schedules). Do NOT use tables for page layout! (That’s so 1999).

Basic Structure

• <table>: The container.
• <tr>: Table Row.
• <th>: Table Header cell (Bold & centered by default).
• <td>: Table Data cell.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

Semantic Grouping

For long tables, group your rows to help the browser (and scrolling).

• <thead>: The header rows.
• <tbody>: The main data rows.
• <tfoot>: Summary footer rows.

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1.00</td>
        </tr>
    </tfoot>
</table>

Merging Cells

• colspan: Merge columns (horizontal).
• rowspan: Merge rows (vertical).

<tr>
    <!-- Spans 2 columns -->
    <td colspan="2">Merged Cell</td>
</tr>

Homework for Day 5:

1. Create a “Weekly Schedule” table.
2. Columns: Day (Mon-Fri) and Activity.
3. Use <thead> for the headers.
4. Add at least 3 rows of data.

Day 6: We get interactive with Forms!