關於HTML表格合併單元格的靈魂拷問

禪師與青年的技術尬聊發表於2020-12-16
HTML

青年：老大，最近在表格中合併單元格，總是不明就裡，好像是合併對了，有時也是蒙的，您能不能就此指條明路？

禪師：這個問題很簡單，合併單元格分為跨行合併和跨列合併，這是<td> 標籤的rowspan和colspan屬性問題，已知3x3表格

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3x3表格</title>
 <style type="text/css">
 td {text-align:center;vertical-align:middle;}
 </style>
</head>
<body>
<table align="center" border="2" bordercolor="black" width="566" cellspacing="0">
    <tr>
	   <td>0</td>
	   <td>1</td>
	   <td>2</td>
	</tr>
	<tr> 
	    <td rowspan = "2"  colspan = "2">3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	 <tr> 
		<td>6</td>
	    <td>7</td>
		<td>8</td>
	</tr>
</table>
</body>
</html>

禪師：首先說說跨行合併rowspan，由於我們書寫表格的習慣是<tr>標籤包裹<td>便籤，因此書寫跨行合併是符合我們的思維習慣，一個<tr>裡合併n個單元格，就刪去n-1個單元格，比如，rowspan=2，那麼3x3的表格裡合併行，刪掉一個<td>就好了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>跨行合併</title>
 <style type="text/css">
 td {text-align:center;vertical-align:middle;}
 </style>
</head>
<body>
<table align="center" border="2" bordercolor="black" width="566" cellspacing="0">
   <tr>
	   <td colspan="2">0</td>
	   <td>1</td>
	</tr>
	<tr>
	    <td>2</td>
	    <td>3</td>
		<td>4</td>
	</tr>
	 <tr>
	    <td>5</td>
		<td>6</td>
	    <td>7</td>
	</tr>
</table>

</body>
</html>

禪師：接下來說說跨列合併colspan，跨列和跨行就不同了，跨列是對不同<tr>便籤的影響，跨n列，就對以下的n-1個<tr>便籤中的<td>標籤進行刪除，比如，colspan=2，那麼3x3的表格裡合併列，刪除以下1列的<td>標籤即可

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>跨列合併</title>
 <style type="text/css">
 td {text-align:center;vertical-align:middle;}
 </style>
</head>
<body>
<table align="center" border="2" bordercolor="black" width="566" cellspacing="0">
   <tr>
	   <td rowspan = "2">0</td>
	   <td>1</td>
	   <td>2</td>
	</tr>
	<tr>
	    <td>3</td>
	    <td>4</td>
	</tr>
	 <tr>
	    <td>5</td>
		<td>6</td>
	    <td>7</td>
	</tr>
</table>

</body>
</html>

 

青年：這麼一說我就明白多了

禪師：我們聽說過很多道理,卻依然過不好這一生，知易行難，實踐出真知，我給你佈置一個任務吧，在3x3表格裡實現跨行跨列合併。

青年：懂了，趁熱打鐵

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 td {text-align:center;vertical-align:middle;}
 </style>
</head>
<body>
<table align="center" border="2" bordercolor="black" width="566" cellspacing="0"> 
    <tr>
	    <td>0</td>
		<td>1</td>
	    <td>2</td>	
	</tr>
   <tr>
	   <td rowspan = "2"  colspan = "2">3</td>
	   <td>5</td>
	</tr>
	<tr>
	    <td>8</td>
	</tr>	
</table>

</body>
</html>

禪師：不錯，合併行列不同於單行合併或者單列合併，而是針對每一列進行行合併，也就是先按列的合併規則，再按行的合併規則，最後再對列規則作用的行刪除一個<td>標籤

 

青年:雖然你總結出了公式也畫了圖，我還是不想這麼麻煩，我就想知道，下次再次合併單元格的時候，能不能一秒鐘搞定。

禪師:年輕人，你這樣就有點不講武德了，這都手把手教會你了，還要為難一個老人家一秒鐘搞定，我一秒鐘手都還沒伸出來呢，就是天王老子來了也不可能一秒鐘搞定。

青年：我還偏偏不信這個邪了，我決定以後出一個一秒鐘搞定專題，方便工作中一秒鐘解決問題。

禪師：魯迅說，花半秒鐘就看透事物本質的人，和花一輩子都看不清事物本質的人，註定是截然不同的命運。我認為這活我可以接，也歡迎微信支付寶比特幣支付。

 

總結：

1.跨行合併（rowspan），合併n個刪掉本行n-1個<td>

2.跨列合併（colspan），合併n個刪掉n-1列個<td>

3.跨行列合併，先按列規則，再按行規則，再對列規則作用的列進行行規則合併

相關文章