你如何在HTML表格中使用colspan和rowspan?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (232)

我不知道如何合并HTML表格中的行和列。

你能帮我做一个这样的HTML表格吗?

提问于
用户回答回答于

我会建议:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>
用户回答回答于

如果你对表格布局是如何工作感到困惑的话,他们基本上从x = 0,y = 0开始,并且穿过它们。让我们用图形来解释,因为它们非常有趣!

当你开始一张表格时,你做了一个网格。第一行和单元格将位于左上角。把它看作一个数组指针,向右移动每个递增的x值,然后向下移动每个递增的y值。

对于你的第一行,你只定义了两个单元格。一个横跨两行,一个横跨四列。所以当你到达第一排的末尾时,它看起来像这样:

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

现在行已经结束,“数组指针”跳转到下一行。由于x位置0已经被前一个单元占用,所以x跳到位置1以开始填充单元。

这行有四个单元格,它们都是1x1块,填充它上面的行的相同宽度。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

下一行都是1x1单元格。但是,如果你添加了一个额外的单元呢?那么,它会跳出右边的边缘。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

但是如果我们改为(而不是添加额外的单元格)使得所有这些单元格的行跨度为2?这里需要考虑的是即使你不打算在下一行添加更多的单元格,该行仍然必须存在(即使它是空行)。如果确实尝试在该行之后立即添加新的单元格,会注意到它将开始将它们添加到底部行的末尾。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

扫码关注云+社区

领取腾讯云代金券