在 HTML 中，如何构造一个跨越多行的表头？

我想制作一个表格，内容如下:

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

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

119406 次浏览
小开
最佳答案

This is how I would do it (working fiddle at http://jsfiddle.net/7pDqb/) Tested in 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>

小开

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

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

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>

小开

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:

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

小开

W3C's Web Accessibility Initiative (WAI) website says to use the markup structure shown below.

(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

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

提交答案