如何在HTML中将表格单元格分组？

Question

所以这很简单。我需要一种方法将单元格分组在一起，就像

或一样，但它们都不起作用。似乎是一个好的解决方案，但它只适用于表格行。救命啊！

- Allen Hundley

---

你是否试图将<TD>标签包裹在<DIV>中？这是基本想法吗？ - dldnh

Answer 1

如果您想要将一行中的2个或更多单元格合并为一个单个单元格，并且与其他“常规”单元格（就像在Google | Excel电子表格中所做的那样）以类似于以下方式的方式合并：

然后，您可以使用`td`元素的`colspan`属性，指示您要合并多少个单元格：

<tr>
  <td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
  <td> Regular cell </td>
  <td> Another cell in same row </td>
</tr>

此外，你可以使用css中的td[colspan]选择器（与你选择的任何父选择器相结合）来引用这些合并的单元格。

以下是一个可行的示例：

/* Style for cells with any colspan attribute */
td[colspan] {
  text-align: center;
}

/* No extra space between cells */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  margin: 0;
  padding: 3px 10px;
  text-align: right;
}

<table>
  <tr>
    <th>Day</th>
    <th>Invoice</th>
    <th>Total</th>
  </tr>
  <tr>
    <!-- this cell will occupy 3 columns -->
    <td colspan=3>January</td>
  </tr>
  <tr>
    <td>2</td>
    <td>0348</td>
    <td>248.35</td>
  </tr>
  <tr>
    <td>7</td>
    <td>0349</td>
    <td>126.14</td>
  </tr>
  <tr>
    <td>18</td>
    <td>0350</td>
    <td>821.99</td>
  </tr>
  <tr>
    <td colspan=3>February</td>
  </tr>
  <tr>
    <td>27</td>
    <td>0351</td>
    <td>643.50</td>
  </tr> 
</table>

- SalDevOps

Answer 2

您可以添加HTML中的col标签来对列td进行分组。

.col-group-1 {
  background-color: yellow;
 }

.col-group-2 {
  background-color: silver;
 }

<table>
  <colgroup>
    <col class="col-group-1">
    <col span="2" class="col-group-2">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Mary</td>
    <td>New york</td>
    <td>987654321</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Los Angeles</td>
    <td>123456789</td>
  </tr>
</table>

</body>
</html>

请查看html col标签以及如何使用css样式。

- Lee Loback

---

不够灵活。以我的情况为例，我需要每3个单元格包装一个包装标签。如果在“tr”下面和“td”上面有一些标签，那就太理想了。 - Eric

不能只是从 W3Schools 复制粘贴... -1 - James Heffer