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

97

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

例

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

html  html-table 
— 马克斯·弗赖
source
合并对吗？你的意思是colspan？
— animuson
@DavidThomas我可以使表具有5行3列。但我真的不知道哪里办理行跨度等
— 马克斯Frai
14
@DAvid：很明显，问问者不知道从哪里开始，有时候甚至不知道所寻找的属性是否存在（在这种情况下为rowspan），有时会很困难
— Chris Sobolewski 2012年
6
如果有幸拥有像Dreamweaver这样的可视编辑器，那么依靠它的一种好方法是创建基本的表格网格，然后将所需的单元合并在一起。然后检查已生成的代码。您将看到各种单元在哪里合并以及如何用代码完成。Dreamweaver通常会生成干净且合规的代码，因此它将为学习者树立良好榜样。
— 超现实主义梦想

Answers:

112

我建议：

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>
展开摘要

参考文献：

— 大卫说恢复莫妮卡
source
2
不要忘记添加漂亮的颜色。
— Blazemonger，2012年
31
在这种情况下，我将“漂亮的色彩”留给读者练习。
— 大卫说恢复莫妮卡（Monica）2012年
如果有人对此有兴趣，请参阅下面的@animousons出色解释stackoverflow.com/a/9830847/362951
— 麻省理工学院
117

如果您对表布局的工作方式感到困惑，则它们基本上从x = 0，y = 0开始并沿其整个路径工作。让我们用图形解释一下，因为它们非常有趣！

启动表时，将创建一个网格。您的第一行和单元格将在左上角。可以将其视为一个数组指针，随着x的每个递​​增值向右移动，随着y的每个递增值向右移动。

对于第一行，您仅定义两个单元格。一个跨越2行向下，一个跨越4列。因此，当您到达第一行的末尾时，它看起来像这样：

预览＃0001

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

现在该行结束了，“数组指针”跳到下一行。由于前一个单元格已经占用了x位置0，因此x跳到位置1开始填充单元格。*请参阅有关行跨度差异的注释。

该行中有四个单元格，均为1x1块，并以其上方行的相同宽度填充。

预览＃0002

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

下一行是所有1x1单元。但是，例如，如果您添加一个额外的单元格该怎么办？好吧，它只会弹出右侧的边缘。

预览＃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>

*但是，如果我们改为（而不是添加额外的单元格）使所有这些单元格的行距为2怎么办？您需要在此处考虑的事情是，即使您不打算在下一行中添加任何其他单元格，该行仍然必须存在（即使它是空行）。如果您确实尝试在紧随其后的行中添加新单元格，则会注意到它将开始将它们添加到底部行的末尾。

预览＃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>

享受创建表的美好世界！

— 动漫
source
14

如果有人在左侧和右侧都在寻找行跨度，请按以下步骤操作：

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>
展开摘要

— 车道
source
5

rowspan如果要向下扩展单元格并colspan延伸到整个单元格，请使用。

— 韦德斯特
source
3

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

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

— 超现实的梦想
source
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
source
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>
— 韦德斯特
source
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 >

如何行距？

<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>
— 恶魔
source
0

我已经将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>
展开摘要

在这里，我从模型对象中获得了rowpan值。

— 阿姆利亚·科普拉（Amulya Koppula）
source
-1

它类似于你的桌子

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

— Ha3Ha3Ha3
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.