如何在 HTML 表中使用 colspan 和 rowspan？

问题描述

我不知道如何合并 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>

参考文献：

td 元素。
th 元素。
tbody 元素。
thead 元素。
table 元素。

次佳解决方案

如果您对表格布局如何工作感到困惑，那么他们基本上从 x = 0 开始，y = 0 并且跨越它们。让我们用图形来解释，因为他们很有趣！

当你开始一张桌子，你做一个网格。你的第一行和单元格将在左上角。想像它像一个数组指针，向右移动每个递增的值 x，并向下移动每个递增的值 y 。

对于您的第一行，您只定义两个单元格。一个跨越 2 行，一个跨越 4 列。所以当你到达第一行的末尾时，它看起来像这样：

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

现在该行已经结束，”array pointer” 向下跳到下一行。由于 x 位置 0 已被前一个单元占用，所以 x 跳转到位置 1 以开始填充单元格。 *请参阅注意行范围之间的区别。

该行在其中有四个单元格，全部为 1×1 块，填充与其上方相同宽度的行。

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

下一行是 1×1 单元格。但是，例如，如果你添加了一个额外的单元格呢？那么它会弹出右边的边。

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

享受创造桌子的美好世界！

第三种解决方案

如果有人在左边和右边找一个行列，这里是怎么做的呢？



table {
    border-collapse: collapse;
}

td {
    padding: 20px;
    border: 1px solid black;
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

或者，如果要将 LEFT 和 RIGHT 添加到现有行集中，则可以通过将折叠的 colspan 投掷在一起，实现相同的结果：



table {
    border-collapse: collapse;
}

td {
    padding: 20px;
    border: 1px solid black;
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

第四种方案

如果要扩展单元格，colspan 可以使用 rowspan 进行扩展。

第五种方案

您可以在 td 元素上使用 rowspan="n"使其跨越 n 行，并在 td 元素上使用 colspan="m"，使其跨越 m 列。

看起来你的第一个 td 需要一个 rowspan="2"，下一个 td 需要一个 colspan="4"。

参考文献

How do you use colspan and rowspan in HTML tables?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何在 HTML 表中使用 colspan 和 rowspan？