表格（Table）

基本表格結構

<table>
    <thead>                        <!-- ← 表頭區 -->
        <tr>                       <!-- ← table row（一列） -->
            <th>姓名</th>          <!-- ← table header（表頭儲存格） -->
            <th>年齡</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>                        <!-- ← 表身區 -->
        <tr>
            <td>小明</td>          <!-- ← table data（資料儲存格） -->
            <td>20</td>
            <td>台北</td>
        </tr>
        <tr>
            <td>小華</td>
            <td>22</td>
            <td>高雄</td>
        </tr>
    </tbody>
    <tfoot>                        <!-- ← 表尾區 -->
        <tr>
            <td colspan="3">共 2 筆</td>  <!-- ← 跨 3 欄 -->
        </tr>
    </tfoot>
</table>

合併儲存格

<!-- colspan — 水平合併（跨欄） -->
<tr>
    <td colspan="2">我佔兩欄</td>  <!-- ← 這格佔 2 欄的寬度 -->
    <td>正常一格</td>
</tr>

<!-- rowspan — 垂直合併（跨列） -->
<tr>
    <td rowspan="2">我佔兩列</td>  <!-- ← 這格佔 2 列的高度 -->
    <td>A1</td>
</tr>
<tr>
    <!-- 這列不用再寫第一格（被上面的 rowspan 佔了） -->
    <td>A2</td>
</tr>

實用範例

<!-- 課表 -->
<table>
    <thead>
        <tr>
            <th>時間</th>
            <th>週一</th>
            <th>週二</th>
            <th>週三</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>09:00</td>
            <td>數學</td>
            <td rowspan="2">英文（連堂）</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>10:00</td>
            <td>國文</td>
            <td>化學</td>
        </tr>
    </tbody>
</table>

表格無障礙

<!-- caption 描述表格內容 -->
<table>
    <caption>2024 年第四季銷售報表</caption>
    <thead>
        <tr>
            <th scope="col">月份</th>      <!-- scope 說明這是「欄標題」 -->
            <th scope="col">營收</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">10 月</th>     <!-- scope 說明這是「列標題」 -->
            <td>$120,000</td>
        </tr>
    </tbody>
</table>

💡 現代 CSS 排版建議：簡單資料展示用 <table>，頁面版面配置用 CSS Flexbox/Grid，不要用表格排版。