在HTML表的同一單元格中使用colspan和rowspan

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>

如何使用colspan和rowspan合並這三個單元格？

Answer 1

不，您不能使用表單元格來實現這一點。 但是，可以使用css樣式顯示類似的布局，如該小提琴所示。

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;
}

您可以使用div標簽創建類似的L形，方法是使用此小提琴中所示的類似CSS樣式。 您也可以參考此鏈接找到用於創建各種形狀的css樣式。