如何在 HTML 表格中使用 colspan 和 rowspan？
Posted
技术标签:
【中文标题】如何在 HTML 表格中使用 colspan 和 rowspan？【英文标题】：How do you use colspan and rowspan in HTML tables? 【发布时间】：2012-04-07 11:59:48 【问题描述】：我不知道如何合并 html 表格中的行和列。
您能帮我用 HTML 制作这样的表格吗？
【问题讨论】：
合并它们对吗？你是说colspan？
@DavidThomas 我可以制作 5 行 3 列的表格。但我真的不知道在哪里应用rowspan等。
@DAvid：很明显，提问者不知道从哪里开始，当您甚至不知道您正在寻找的属性是否存在时有时会很困难（在这种情况下为rowspan )
如果您有幸拥有像 Dreamweaver 这样的可视化编辑器，那么了解这一点的一个好方法是创建基本表格网格，然后将所需的单元格合并在一起。然后检查已经生成的代码。您将看到各种单元格的合并位置以及它是如何使用代码完成的。 Dreamweaver 通常会生成干净且合规的代码，因此它将为学习者树立一个好榜样。
【参考方案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>
享受创建表格的美妙世界！
【讨论】：
【参考方案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"> </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。
【讨论】：
别忘了添加漂亮的颜色。 在这种情况下，我将“漂亮的颜色”留给读者作为练习。 如果有人感兴趣，一般来说这是如何工作的，请参阅下面@animousons 的精彩解释***.com/a/9830847/362951【参考方案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>【讨论】：
【参考方案4】：如果您想向下扩展单元格，请使用 rowspan 并使用 colspan 扩展。
【讨论】：
【参考方案5】：您可以在 td 元素上使用 rowspan="n" 使其跨越 n 行，并在 td 元素上使用 colspan="m" 使其跨越 m 列。
看起来您的第一个 td 需要一个 rowspan="2"，而下一个 td 需要一个 colspan="4"。
【讨论】：
【参考方案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>
【讨论】：
【参考方案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>
【讨论】：
【参考方案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>
【讨论】：
【参考方案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>
【讨论】：
【参考方案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 值。
【讨论】：
【参考方案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>
【讨论】：
以上是关于如何在 HTML 表格中使用 colspan 和 rowspan？的主要内容，如果未能解决你的问题，请参考以下文章