在 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

不，您不能使用表格单元格来实现这一点。但是，可以使用 fiddle 中所示的 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 样式，如 fiddle 所示。您也可以参考link 来查找用于创建各种形状的 css 样式。