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

Question

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

htmlhtml-table

98

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

请帮我制作这样的HTML表格。

- Max Frai

合并它们，是指“colspan”吗？ - animuson

@DavidThomas 我可以制作一个有5行3列的表格。但我不太清楚在哪里应用rowspan等功能。 - Max Frai

14

@DAvid：看起来提问者并不知道从哪里开始，有时候当你甚至不知道你正在寻找的属性是否存在时（在这种情况下是rowspan），这很困难。 - Chris Sobolewski

6

如果你有类似Dreamweaver这样的可视化编辑器，学习这个知识点的好方法是先创建基本的表格框架，然后合并所需的单元格。然后检查生成的代码。你会看到哪些单元格被合并以及如何通过代码实现。Dreamweaver通常会生成干净规范的代码，这对学习者来说是一个好的示范。 - Surreal Dreams

11个回答

113

我建议：

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>

参考资料：

- David Thomas

2

不要忘记添加漂亮的颜色。 - Blazemonger

31

在这种情况下，“漂亮的颜色”就留给读者自己思考了。 - David Thomas

如果有人对此感兴趣，可以查看@animousons在下面的出色解释：https://dev59.com/dmkw5IYBdhLWcg3wiq-s#9830847 - mit

14

如果有人正在寻找同时在左侧和右侧都需要跨行的 rowspan，那么可以按照以下方式实现：

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>

或者，如果您想将左侧和右侧添加到现有行集中，可以通过在它们之间折叠的 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>

- Lane

5

如果您想要向下扩展单元格，请使用rowspan；如果您想要横跨扩展，请使用colspan。

- Wadester

3

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

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

- Surreal Dreams

2

你要查找的属性是第一个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>

- Chris Sobolewski

2

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

- hjpotter92

1

我曾经用过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的值。

- Amulya Koppula

0

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

- Wadester

0

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

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

<td colspan=2 >

如何使用 colspan？

<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（行跨度） rowspan属性指定单元格垂直方向要跨越的行数。也就是说，您想将同一列中的两个或多个单元格垂直合并为一个单元格。

<td rowspan=2 >

如何使用 Rowspan？

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

- Fel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- animuson · Accepted Answer

如果你对表格布局如何工作感到困惑，它们基本上从x=0，y=0开始，然后向右移动，每个x的值增加一次，向下移动，每个y的值增加一次。我们来用图形解释一下，因为它们非常有趣！

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

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

Preview #0001

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

现在行已经结束，"数组指针"跳到下一行。由于x位置0已经被前一个单元格占据，x跳到位置1开始填充单元格。*请参阅有关行跨度差异的说明。此行有四个单元格，它们都是1x1块，填充与上面一行相同的宽度。

Preview #0002

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

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

Preview #0003

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

* 但是如果我们将所有这些单元格的 rowspan 设置为 2，会怎样呢？你需要考虑的是，即使在下一行不再添加任何单元格，该行仍必须存在（即使它是空行）。如果你试图在紧接着的行中添加新的单元格，你会注意到它们会开始添加到底部行的末尾。

Preview #0004

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

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