如何构建表头而不是跨越HTML中的多行？

I would like to construct a table as follows:

我想构建一个表如下：

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

Seeing as how there is only 1 line for TH elements, how can I construct the header row such as the columns line up? Hierarchical tables doesn't seem like a good option because the column widths won't line up, and I also can't use two rows with TH tags with colspan.

看看TH元素只有一行，如何构造标题行，如列排列？分层表似乎不是一个好的选择，因为列宽不会排列，我也不能使用带有colspan的TH标签的两行。

3 个解决方案

#1

This is how I would do it (working fiddle at http://jsfiddle.net/7pDqb/) Tested in Chrome.

我就是这样做的（在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

Were you accidentally using rowspan instead of colspan? Or did you accidentally forget a closing </tr> tag?

你不小心使用了rowspan而不是colspan吗？或者您是否意外忘记了结束标签？

Extending off of tvanfosson's answer, I'd use the scope attribute on the th elements for semantic and accessibility purposes:

扩展tvanfosson的答案，我会在第14个元素上使用scope属性用于语义和可访问性目的：

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>

#3

However, besides the case of header cell spanning multiple columns, tables that have header cell spanning two rows are also very often seen.

然而，除了跨越多个列的标题单元的情况之外，还经常看到具有跨越两行的标题单元的表。

Here is an example. See col 5 and data5 below:

这是一个例子。见下面第5栏和数据5：

    <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>

Here is the fiddle.

这是小提琴。

#1