HTML 複雜表格實現：rowspan/colspan 合併單元格的完整代碼

根據圖片需求，實現一個包含多行合併、表頭固定、分組行背景色、底部合計行的複雜考核指標表格。

完整 HTML 代碼

<!DOCTYPE html>
<html>
<head>
  <title>考核指標表格</title>
  <style>
    table { border-collapse: collapse; text-align: center; width: 100%; }
    th, td { border: 1px solid #333; padding: 8px; }
    th { background-color: green; color: white; }
    .group-header { background-color: #6f6; font-weight: bold; }
    tfoot td { background-color: #3c6; color: white; font-weight: bold; }
  </style>
</head>
<body>
  <table border="1" cellspacing="0">
    <thead>
      <tr>
        <th colspan="2" width="200" height="50">考核指標</th>
        <th width="120">考核依據</th>
        <th width="100">得分</th>
        <th width="120">資料上傳</th>
      </tr>
    </thead>
    <tbody>
      <!-- 第一組：領導重視，rowspan=4 -->
      <tr>
        <td rowspan="4" class="group-header" width="80" height="150">領導重視</td>
        <td width="120"></td>
        <td rowspan="4">體育行政</td>
        <td>1</td>
        <td>上傳</td>
      </tr>
      <tr>
        <td></td>
        <td>1</td>
        <td>上傳</td>
      </tr>
      <tr>
        <td></td>
        <td>2</td>
        <td>上傳</td>
      </tr>
      <tr>
        <td></td>
        <td>1</td>
        <td>上傳</td>
      </tr>
      <!-- 第二組：佔位 2 行 -->
      <tr>
        <td rowspan="2" class="group-header" height="100"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 第三組：佔位 3 行 -->
      <tr>
        <td rowspan="3" class="group-header" height="150"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>總分</td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

關鍵點解析

• rowspan：垂直合併單元格，如「領導重視」跨 4 行，「體育行政」跨 4 行。
• colspan：水平合併，表頭「考核指標」跨 2 列。
• thead/tbody/tfoot：語義化結構，便於樣式控制和打印分頁。
• CSS border-collapse: collapse：合並邊框，避免雙線。
• 分組行背景色：用 .group-header 標識合併的首行，統一設置綠色背景。

響應式建議

若表格內容較多，可添加容器 <div style="overflow-x:auto"> 包裹 table，小屏幕橫向滾動。