如何构造一个表格标题而不是跨越 HTML 中的多行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18680044/
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 can I construct a table header than spans multiple rows in HTML?
提问by statguy
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 元素只有 1 行，如何构造标题行，例如列对齐？分层表似乎不是一个好的选择，因为列宽不会对齐，而且我也不能使用带有 colspan 的 TH 标签的两行。
回答by tvanfosson
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>回答by rink.attendant.6
Were you accidentally using rowspaninstead of colspan? Or did you accidentally forget a closing </tr>tag?
你是不是不小心使用了rowspan而不是colspan？还是您不小心忘记了结束</tr>标签？
Extending off of tvanfosson's answer, I'd use the scopeattribute on the thelementsfor semantic and accessibilitypurposes:
扩展 tvanfosson 的回答，我将使用元素scope上的属性来th实现语义和可访问性目的：
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>回答by gm2008
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 5and data5below:
这是一个例子。见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>
Here is the fiddle.
这是小提琴。
回答by cantera
W3C's Web Accessibility Initiative (WAI) website says to use the markup structure shown below.
W3C 的 Web Accessibility Initiative (WAI) 网站说要使用如下所示的标记结构。
(Note that the rendered markup in the example table on the website is slightly different than what they show in the sample markup. See link and inspect the example table.)
（请注意，网站上示例表中呈现的标记与它们在示例标记中显示的略有不同。请参阅链接并检查示例表。）
Source: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers
资料来源：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>
