如何构建一个表格标题而不是跨越 HTML 中的多行？

Posted 2023-03-05

【中文标题】如何构建一个表格标题而不是跨越 HTML 中的多行？

【英文标题】：How can I construct a table header than spans multiple rows in HTML?

【发布时间】：2013-09-11 20:50:32

【问题描述】：

我想构建一个表格如下：

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

看到 TH 元素只有 1 行，我该如何构造标题行，例如列对齐？分层表似乎不是一个好的选择，因为列宽不会对齐，而且我也不能使用带有 TH 标记的两行和 colspan。

【问题讨论】：

为什么不能使用两行和colspan？

多行 TH 标签会合并成一行 TH。继续我上面的示例，生成的表格将是主标题 1、主标题 2、Minor1、Minor2、Minor3、Minor4 的单个标题行。

一种解决方案是使用带有特殊 CSS 而不是 TH 的 TD，但理想情况下我想遵循传统的 html 表格结构。

我不认为这是正确的：jsfiddle.net/7pDqb

因题外话而关闭？！ “我可以有一个多行的表头吗？”似乎是一个非常好的堆栈溢出问题。我只是想知道自己将多个 tr 放入一个主题中是否可行。

【参考方案1】：

这就是我的做法（在 http://jsfiddle.net/7pDqb/ 工作小提琴）在 Chrome 中测试。

th, td  border: 1px solid black 

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

【参考方案2】：

您是否不小心使用了rowspan 而不是colspan？还是您不小心忘记了结束 </tr> 标记？

延伸 tvanfosson 的回答，我将 scope attribute on the th elements 用于语义和 accessibility 目的：

th, td  border: 1px solid black 

<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢你，正是我的情况，不小心使用了 rowspan

【参考方案3】：

但是，除了标题单元格跨越多列的情况外，标题单元格跨越两行的表格也很常见。

这是一个例子。请参阅下面的col 5 和data5：

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

这里是fiddle。

【参考方案4】：

W3C 的 Web Accessibility Initiative (WAI) 网站说要使用如下所示的标记结构。

（请注意，网站示例表中呈现的标记与示例标记中显示的略有不同。请参阅链接并检查示例表。）

来源：https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>