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

Question

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

您能帮我用 HTML 制作这样的表格吗？

Answer 1

如果您对表格布局的工作方式感到困惑，它们基本上从 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 2

我建议：

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

或者，如果您想将 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>

Answer 4

如果您想向下扩展单元格，请使用 rowspan 并使用 colspan 扩展。

Answer 5

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

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

Answer 6

您要查找的第一个 td 属性是 rowspan： http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<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></tr>
</table>

Answer 7

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 8

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

Answer 9

Colspan 和 Rowspan 一个表被分成几行，每一行又分成多个单元格。在某些情况下，我们需要表格单元跨越（或合并）多个列或行。在这些情况下，我们可以使用 Colspan 或 Rowspan 属性。

科尔斯潘 colspan 属性定义了一个单元格应该水平跨越（或合并）的列数。也就是说，您想将一行中的两个或多个 Cell 合并为一个 Cell。

<td colspan=2 > 

如何跨度？

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

行跨度 rowspan 属性指定单元格应垂直跨越的行数。也就是说，您想将同一列中的两个或多个单元格垂直合并为一个单元格。

<td rowspan=2 >

如何跨行？

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

Answer 10

我已将 ngIf 用于我的类似逻辑之一。如下：

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

这里， 我正在从我的模型对象中获取 rowspan 值。

Answer 11

和你的桌子很像

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>