如何在 HTML 表格中使用 colspan 和 rowspan？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9830506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you use colspan and rowspan in HTML tables?
提问by Max Frai
I don't know how to merge rows and columns inside HTML tables.
我不知道如何合并 HTML 表格中的行和列。
Can you please help me with making such a table in HTML?
你能帮我用 HTML 制作这样的表格吗？
回答by animuson
If you're confused how table layouts work, they basically start at x=0, y=0 and work their way across. Let's explain with graphics, because they're so much fun!
如果您对表格布局的工作方式感到困惑，它们基本上从 x=0, y=0 开始并按照它们的方式工作。让我们用图形来解释，因为它们非常有趣！
When you start a table, you make a grid. Your first row and cell will be in the top left corner. Think of it like an array pointer, moving to the right with each incremented value of x, and moving down with each incremented value of y.
当你开始一张桌子时，你就制作了一个网格。您的第一行和单元格将位于左上角。把它想象成一个数组指针，随着 x 的每个增加值向右移动，随着 y 的每个增加值向下移动。
For your first row, you're only defining two cells. One spans 2 rows down and one spans 4 columns across. So when you reach the end of your first row, it looks something like this:
对于第一行，您只定义了两个单元格。一个向下跨越 2 行，一个跨越 4 列。所以当你到达第一行的末尾时，它看起来像这样：
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Now that the row has ended, the "array pointer" jumps down to the next row. Since x position 0 is already taken up by a previous cell, x jumps to position 1 to start filling in cells. * See note about difference between rowspans.
现在该行已经结束，“数组指针”跳到下一行。由于 x 位置 0 已被前一个单元格占用，因此 x 跳转到位置 1 以开始填充单元格。* 请参阅有关行跨度之间差异的说明。
This row has four cells in it which are all 1x1 blocks, filling in the same width of the row above it.
这一行有四个单元格，它们都是 1x1 块，填充与其上方行相同的宽度。
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The next row is all 1x1 cells. But, for example, what if you added an extra cell? Well, it would just pop off the edge to the right.
下一行是所有 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>
*But what if we instead (rather than adding the extra cell) made all these cells have a rowspan of 2? The thing you need to consider here is that even though you're not going to be adding any more cells in the next row, the row still must exist (even though it's an empty row). If you did try to add new cells in the row immediately after, you'd notice that it would start adding them to the end of the bottom row.
*但是，如果我们改为（而不是添加额外的单元格）使所有这些单元格的行跨度为 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>
Enjoy the wonderful world of creating tables!
享受创建桌子的美妙世界！
回答by David says reinstate Monica
I'd suggest:
我建议：
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>References:
参考：
回答by Lane
If anyone is looking for a rowspan on both the left AND on the right, here is how you can do it:
如果有人在左侧和右侧寻找行跨度，您可以这样做：
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, if you want to add the LEFT and RIGHT to an existing rowset, you can achieve the same result by throwing them in with a collapsed colspanin between:
或者，如果您想将 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>回答by Wadester
Use rowspanif you want to extend cells down and colspanto extend across.
rowspan如果要向下扩展单元格并colspan跨过单元格，请使用。
回答by Surreal Dreams
You can use rowspan="n"on a td element to make it span nrows, and colspan="m"on a td element to make it span mcolumns.
您可以rowspan="n"在 td 元素上使用以使其跨行n，并colspan="m"在 td 元素上使用以使其跨m列。
Looks like your first td needs a rowspan="2"and the next td needs a colspan="4".
看起来您的第一个 td 需要一个rowspan="2"，而下一个 td 需要一个colspan="4".
回答by Chris Sobolewski
The property you are looking for that first td is rowspan:
http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm
您正在寻找的第一个 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>
回答by hjpotter92
<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>????????????????????????????????????????????????????????????????????????
回答by Wadester
<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>
回答by Fel
Colspan and Rowspan A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.
Colspan 和Rowspan 一个表被分成行，每行又被分成单元格。在某些情况下，我们需要表格单元格跨越（或合并）不止一列或一行。在这些情况下，我们可以使用 Colspan 或 Rowspan 属性。
Colspan The colspan attribute defines the number of columns a cell should span (or merge) horizontally. That is, you want to merge two or more Cells in a row into a single Cell.
Colspan colspan 属性定义单元格应该水平跨越（或合并）的列数。也就是说，您希望将一行中的两个或多个 Cell 合并为一个 Cell。
<td colspan=2 >
How to colspan ?
如何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 The rowspan attribute specifies the number of rows a cell should span vertically. That is , you want to merge two or more Cells in the same column as a single Cell vertically.
Rowspan rowspan 属性指定单元格应垂直跨越的行数。也就是说，您希望将同一列中的两个或多个 Cell 垂直合并为单个 Cell。
<td rowspan=2 >
How to 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>
回答by Ha3Ha3Ha3
It is similar to your table
它和你的桌子很相似
<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>
