表格td單元格合併

admin發表於2018-09-12

在使用table表格組織資料的時候，可能出於分類或者便利等原因，需要將某些單元格合併起來，下面就分享一個這樣的程式碼例項，並簡單介紹一下它的實現原理。

程式碼例項如下:

[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:50%;
}
table td{
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
}
</style>
</head>
<body>
  <table border="1" width="400">
    <tr>
      <td colspan="4" align="center">課程表</td>
    </tr>
    <tr>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th rowspan="4">星期四</th>
    </tr>
    <tr>
      <td>數學</td>
      <td>語文</td>
      <td>英語</td>
    </tr>
    <tr align="ceter">
      <td>數學</td>
      <td>語文</td>
      <td>英語</td>
    </tr>
    <tr>
      <td>數學</td>
      <td>語文</td>
      <td>英語</td>
    </tr>
  </table>
</body>
</html>

實現單元合併有賴於colspan和rowspan兩個屬性，具體參閱相關閱讀。

相關閱讀:

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

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

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

相關文章