在HTML表中同一小區使用合併單元格和行跨度

Question

我的默認表看起來是這樣的，有4個獨立的單元：

我想創建一個表，這個模式（合併R1C1 & R1C2 & R2C2 ）：

我的默認表的代碼是：

<table border="2"> 
<caption style="border: 1px dotted;">Table 1</caption> 
<tr> 
<td>r1c1</td> 
<td>r1c2</td> 
</tr> 
<tr> 
<td>r2c1</td> 
<td>r2c2</td> 
</tr> 
</table> 

我的合併表的代碼看起來像這樣（但不這樣做我想要的東西！）：

<table border="2"> 
<caption style="border: 1px dotted;">Table 1</caption> 
<tr> 
<td colspan="2" rowspan="2">r1c1 & r1c2 & r2c2</td> 
</tr> 
<tr> 
<td >r2c1</td> 
</tr> 
</table> 

如何獲得使用合併單元格和行跨度這三個細胞融合？

Answer 1

不，你不能用表格單元來實現它。但是，可以使用css樣式顯示類似的佈局，如fiddle所示。

HTML

<table border="2"> 
    <caption style="border: 1px dotted;">Table 1</caption> 
    <tr> 
     <td id="r1c1" colspan="2">r1c1 & r1c2</td> 
    </tr> 
    <tr> 
     <td>r2c1</td> 
     <td id="r2c2" rowspan="2">r2c2</td> 
    </tr> 
</table> 

CSS

#r1c1 { 
border: none !important; 
} 

#r2c2 { 
border: none !important; 
} 

您可以創建如本fiddle應用類似CSS樣式使用div標籤類似的L形。你也可以參考這個link找到創建各種形狀的CSS樣式。