HTML表格可以在行上有可变数量的单元格吗？答案

【问题标题】：Can HTML table have variable number of cells on rows?HTML表格可以在行上有可变数量的单元格吗？
【发布时间】：2011-03-29 22:12:05
【问题描述】：

或者单元格的总数应该等于columns * rows？

在不同行上具有不同数量的单元格的表格似乎通过了 W3 验证器。

【问题讨论】：

标签： html html-table

【解决方案1】：

这并不违反定义。但是您应该使用colspan 属性将列扩展到整行：

<table>
  <tr>
    <td>Row with</td>
    <td>2 cols</td>
  </tr>
  <tr>
    <td colspan="2">Row with only one col</td>
  </tr>
</table>

如果单元格周围有边框，这也会有所帮助。

您甚至可以让表格的列扩展到两行：

<table>
  <tr>
    <td rowspan="2">First column in row 1 and row 2</td>
    <td>Second column in row 1</td>
  </tr>
  <tr>
    <td>second column in row 2</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以使用colspan，但包含colspan 值的总和应该相等，表格才能正确呈现。

<table>
  <tr>
     <td colspan="2">blah</td>
  </tr>
  <tr>
     <td>blah</td>
     <td>boo</td>
  </tr>
</table>

第一行有一个单元格，但由于colspan，它跨越了两个单元格，第二行有两个单元格，这是完全有效的。

【讨论】：

【解决方案3】：

是的，可以。在table > tr > td，td 中包含内容。 Td 参考这里：http://www.htmlcodetutorial.com/tables/_TD.html。在该参考资料中，您可以看到 TD 有 2 个属性，即：colspan 和 rowspan。通过使用这 2 个属性，一个表格可以在不同的行上有不同数量的单元格。
演示：

<table border="1">
     <tr>
          <td>a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td colspan="2">c</td>
     </tr>
</table>

和

<table border="1">
     <tr>
          <td rowspan="2">a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td>c</td>
     </tr>
</table>

【讨论】：

【解决方案4】：

是的，您可以创建一个 HTML 表格并在某些行上省略 <td> 元素，但这被认为是错误的表格，因为您无法确定 HTML 渲染器（浏览器）将如何处理这种情况。不同浏览器的呈现方式可能略有不同。

定义每行显示不同数量单元格的表格的推荐方法是使用colspan 将两个或多个相邻单元格合并为一个。这将使最右侧的单元格与其正确的列对齐，并消除您希望 HTML 渲染器执行的操作的任何歧义。

【讨论】：

【解决方案5】：

你用过：

<table>
<thead>
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
</thead>
<tbody>
    <tr>
        <td rowspan="2">A large cell</td>
        <td>Another small cell0</td>
        <td>Another small cell0</td>
    </tr>
    <tr>
        <td>Another small cell1</td>
        <td>Another small cell1</td>
    </tr>
</tbody>

【讨论】：