table表頭分組程式碼例項

admin發表於2018-09-13
原文網址 : https://www.softwhy.com/article-9154-1.html

表格組織資料非常便利，有時候分類比較複雜，比如大的分類中還包括小的分類。

下面就分享一段類似功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{
  border:1px solid #ccc;
  border-collapse:collapse;
  width:60%;
}
table td,table th{
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <td></td>
      <th colspan="4">部門情況</th>
      <th colspan="4">外包情況</th>
    </tr>
    <tr>
      <td></td>
      <th>人數</th>
      <th>計劃飽和度</th>
      <th>絕對飽和度</th>
      <th>相對飽和度</th>
      <th>人數</th>
      <th>計劃飽和度</th>
      <th>絕對飽和度</th>
      <th>相對飽和度</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <a href="#">資訊系統開發</a>
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">業務系統開發</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">支撐系統開發</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">運營系統開發</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">增值業務開發</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">技術服務</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">系統整合</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
    <tr>
      <th> 
        <a href="#">質量管理</a> 
      </th>
      <td>30</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>
</body>
</html>

上面實現了table表頭分組效果，本質上還是單元格合併。

相關閱讀:

（1）.colspan參閱HTML <td> colspan屬性一章節。

（2）.rowspan參閱HTML <td> rowspan屬性一章節。

（3）.border-collapse參閱CSS border-collapse一章節。

相關文章