如何合並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 style="border-collapse:collapse;">
<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 style="border-collapse:collapse;">
<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 style="border-collapse:collapse;"><!--四行三列表格-->
<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:合並行合並列后,單元格寬高會改變,建議用合並后新的寬高。當然不改解析的時候也會變成合並的,但是建議先畫草圖,把合並行列的寬高設置真正的具體值。如果盛放的內容不固定,可去掉高度,高度會自適應,只限制寬度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM