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

Question

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

​

​

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

Answer 1

我建议：

​

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 element.
• th element.
• tbody element.
• thead element.
• table element.

Answer 2

如果你搞不懂表格布局是如何工作的，它们基本上是从x=0、y=0开始，然后以自己的方式工作。让我们用图形来解释，因为它们太有趣了！

当您开始创建一个表格时，您将创建一个网格。您的第一行和单元格将位于左上角。把它想象成一个数组指针，随着x的每个增量值向右移动，随着y的每个增量值向下移动。

对于第一行，您只定义了两个单元格。一个横跨2行，一个横跨4列。因此，当您到达第一行的末尾时，它看起来如下所示：

​

​

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

享受创建表的美妙世界吧！

Answer 3

如果有人想同时在左边和右边寻找行跨度，下面是你可以做到的方法：

​

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>

​

Alternatively，如果要将左侧和右侧添加到现有的行集，则可以通过在它们之间加上一个折叠的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>

​