當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

如何合并table单元格

發布時間：2023/12/29 综合教程 25 生活家

生活随笔收集整理的這篇文章主要介紹了如何合并table单元格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html里table合并單元格屬于html和css樣式的范圍，table標簽可通過rowspan和colspan來合并行或列。
設計表格：
設計的時候可以先畫草圖，然后根據草圖寫代碼，用紙張和筆簡單畫草圖比較快捷，用PS等畫圖軟件也可以，但是不如用紙筆畫方便。
1.可以根據草圖計算出有多少行，每行有多少單元格。
2.如果不喜歡計算，也可以先復制足夠個數的沒有合并行合并列的表格，然后根據草圖進行逐個合并刪。例如，第一行第一個單元格需要合并三行，rowspan是3，就在當前行加上rowspan=3，然后刪除下方第二行和第三行的第一個td單元格。要合并3列，直接刪除當前行后面的三個td單元格。

修改表格：
修改表格的時候，先觀察這個表整體的最大行和最大列，然后進行單元格合并。觀察和計算每行加減后的單元格數量，刪除和增加單元格。

簡短問答
如何合并單元格：
百度下table相關的html和css樣式，rowspan和colspan可合并table的行或列。

測試代碼：

<body>
<!--合并行，合并多少行，下面多少行少一個td-->
<!--合并行2，下一行去掉一個td，如果是合并行3，下兩行去掉一個td，以此類推...-->
<table border=1>
<tr>
    <td rowspan="2" width="50" height="50" bgcolor="yellow"></td><!--合并后實際高度100-->
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
</tr>
<tr><!--上一行合并2，這一行刪去一個td，該單元格被上面行合并了-->
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
</tr>
</table>
<p>-------分隔線-------</p>
<!--合并列，合并多少列，當前行少多少個td-->
<table border=1>
<tr><!--當前行合并列2，當前行刪去一個td,合并多少列，刪去多少td-->
    <td colspan="2" width="100" height="50" bgcolor="yellow"></td>
    <td width="50" height="50"></td>
</tr>
<tr>
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
</tr>
</table>
<p>-------分隔線-------</p>
<table border=1><!--四行三列表格-->
<tr><!--第一行，合并3列，共三列，后兩列被合并了，所以一共一個單元格-->
    <td colspan=3 width="50" height="50" align="center">tr1:td1</td>
</tr>
<tr><!--合并行，第一個單元格合并行2，第三個單元格合并行2，列不合并，為最大三列-->
    <td rowspan=2 width="50" height="50" align="center" bgcolor="yellow">tr2:td1</td>
    <td width="50" height="50" align="center" bgcolor="yellow">tr2:td2</td>
    <td rowspan=2 width="50" height="50" align="center" bgcolor="yellow">tr2:td3</td>
</tr>
<tr><!--第一個單元格被上一行的第一個單元格合并，第三列被上一行的第三個單元格合并，只剩中間一列-->
    <td width="50" height="50" align="center">tr3:td1</td>
</tr>
<tr><!--第二個單元格合并列第三個單元格，第二列和第三列合并成一個，共兩列-->
    <td width="50" height="50" align="center">tr4:td1</td>
    <td colspan=2 width="50" height="50" align="center">tr4:td2</td>
</tr>
</table>
</body>

圖示：

PS：合并行合并列后，單元格寬高會改變，建議用合并后新的寬高。當然不改解析的時候也會變成合并的，但是建議先畫草圖，把合并行列的寬高設置真正的具體值。如果盛放的內容不固定，可去掉高度，高度會自適應，只限制寬度。

總結

以上是生活随笔為你收集整理的如何合并table单元格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。