HTML Table 結構深度解析：語義化標籤、合併單元格、響應式最佳實踐

HTML <table> 不僅是佈局工具，更是結構化數據的語義化容器。本文系統講解完整表格結構（thead/tbody/tfoot、caption、colgroup）、跨行/跨列合併（rowspan/colspan）、無障礙屬性、響應式處理與現代 CSS 樣式技巧。

完整語義化結構

<table>
  <caption>2024 年季度銷售統計</caption>
  <colgroup>
    <col style="width: 80px;">
    <col span="2" style="width: 150px;">
    <col style="width: 120px;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">季度</th>
      <th scope="col">產品 A</th>
      <th scope="col">產品 B</th>
      <th scope="col">總計</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>1,200</td>
      <td>980</td>
      <td>2,180</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>1,350</td>
      <td>1,120</td>
      <td>2,470</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">年度總計</th>
      <td>2,550</td>
      <td>2,100</td>
      <td>4,650</td>
    </tr>
  </tfoot>
</table>

• caption：表格標題，螢幕閱讀器優先朗讀；
• colgroup/col：列組樣式、寬度控制，替代逐列 td 設寬；
• thead/tbody/tfoot：語義分區，打印時 thead/tfoot 可重複顯示；
• th scope="col|row|colgroup|rowgroup"：明確標題關聯範圍，無障礙關鍵；

合併單元格：rowspan / colspan

跨行合併（rowspan）

<tbody>
  <tr>
    <td rowspan="2">合併兩行</td>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <!-- 此行少第一個 td -->
    <td>A2</td>
    <td>B2</td>
  </tr>
</tbody>

• rowspan="N" 佔據當前行及向下 N-1 行；
• 後續行對應位置 必須省略 被合併的單元格；
• 視覺上單元格向下延伸。

跨列合併（colspan）

<tr>
  <td>正常列</td>
  <td colspan="3">合併三列內容</td>
</tr>

• colspan="N" 佔據當前列及向右 N-1 列；
• 同行後續位置對應省略單元格。

混合合併：複雜表頭示例

<thead>
  <tr>
    <th rowspan="2">學生</th>
    <th colspan="3">期中考試</th>
    <th colspan="3">期末考試</th>
  </tr>
  <tr>
    <th>語文</th><th>數學</th><th>英語</th>
    <th>語文</th><th>數學</th><th>英語</th>
  </tr>
</thead>

無障礙增強屬性

響應式表格三大方案

方案一：水平滾動容器（最簡單）

<div class="table-responsive">
  <table>...</table>
</div>

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {min-width: 600px;}

方案二：CSS Grid 重構為卡片（移動端優先）

@media (max-width: 640px) {
  table, thead, tbody, th, td, tr {display: block; width: 100%;}
  thead {display: none;} /* 隱藏表頭，用 data-label 替代 */
  tr {margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px;}
  td {
    display: flex; justify-content: space-between; padding: 0.5rem;
    border-bottom: 1px solid #eee; text-align: right;
  }
  td::before {
    content: attr(data-label); font-weight: bold; text-align: left;
  }
  td:last-child {border-bottom: none;}
}

<td data-label="產品 A">1,200</td>

方案三：關鍵列固定 + 橫向滾動（數據密集型）

.table-wrap {position: relative; overflow-x: auto;}
table {border-collapse: collapse;}
th:first-child, td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: white; box-shadow: 2px 0 4px rgba(0,0,0,.1);
}

現代 CSS 樣式技巧

/* 斑馬紋 */
tbody tr:nth-child(odd) {background: #f9f9f9;}

/* 懸停高亮行列 */
tbody tr:hover {background: #eef;}
td:hover::before {content: attr(data-label);} /* 配合響應式 */

/* 邊框合併 */
table {border-collapse: collapse;}
th, td {border: 1px solid #ddd; padding: 0.75rem;}

/* 數字右對齊 */
td[data-type="number"] {text-align: right; font-variant-numeric: tabular-nums;}

/* 列寬自適應 */
col:first-child {width: 1%; white-space: nowrap;} /* 最小寬度 */
col:last-child {width: 99%;} /* 撐開剩餘 */

PHP 動態生成表格最佳實踐

function render_table(array $headers, array $rows, array $options = []): string {
    $html = '<table>';
    if (!empty($options['caption'])) {
        $html .= '<caption>' . htmlspecialchars($options['caption']) . '</caption>';
    }
    $html .= '<thead><tr>';
    foreach ($headers as $h) {
        $scope = $h['scope'] ?? 'col';
        $abbr = isset($h['abbr']) ? ' abbr="' . htmlspecialchars($h['abbr']) . '"' : '';
        $html .= "<th scope=\"{$scope}\"{$abbr}>" . htmlspecialchars($h['label']) . '</th>';
    }
    $html .= '</tr></thead><tbody>';
    foreach ($rows as $row) {
        $html .= '<tr>';
        foreach ($row as $key => $cell) {
            $tag = ($key === 0 && $options['first_col_th']) ? 'th' : 'td';
            $scope = ($tag === 'th') ? ' scope="row"' : '';
            $label = $headers[$key]['label'] ?? '';
            $data = $label ? ' data-label="' . htmlspecialchars($label) . '"' : '';
            $html .= "<{$tag}{$scope}{$data}>" . htmlspecialchars((string)$cell) . "</{$tag}>";
        }
        $html .= '</tr>';
    }
    $html .= '</tbody></table>';
    return $html;
}

掌握語義化結構、合併邏輯、響應式三板斧，能輸出既美觀又無障礙、可維護的數據表格。

1. 上一篇文章： PHP header() 重定向完全指南：避坑、輸出緩衝、最佳實踐
2. 下一篇文章： PHP 利用 Table 標籤導出 Excel：Header 設置、編碼處理、資料庫查詢實戰

PHP 相關知識

PHP 使用 NuSOAP 建立 WebService 並透過 WSDL 讓 ASP.NET 呼叫完整實戰

前言 NuSOAP 是純 PHP 實作的 SOAP 庫，支援

PHP 徹底解決表單重複提交：Token 模式原理、實作與 CodeIgniter 擴充

問題根源 使用者送出表單後按 F5 重整、或瀏覽器前進/後退

PHP 後台權限分配系統：基於欄目 ID 的 RBAC 簡易實作

需求場景 後台管理系統需支援多管理員、分級權限：超級管理員分

Zend Studio 8 字體與大小自定義設置圖文教程

四步快速完成Zend Studio 8編輯器字體個性化配置，