如何构建一个涵盖多行的表标题 HTML?

我想建立一个表如下:


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


看到只有 1 字符串 TH 元素,如何构建标题字符串,例如列内置的线路? 分层表似乎似乎不是一个好的选择,因为列的宽度不会对齐,而且我也不能使用两行标签 TH 从 colspan.
已邀请:

风见雨下

赞同来自:

这就是我怎么做的 /在职的 fiddle 在
http://jsfiddle.net/7pDqb/
/, 测试B. 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>

石油百科

赞同来自:

你不小心使用了
rowspan

反而
colspan

? 或者你不小心忘记了闭幕标签

?

扩大答案 tvanfosson, 我会使用
https://developer.mozilla.org/ ... nt/th
出于语义的目的和
http://www.w3.org/WAI/GL/WCAG2 ... .html
:


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>

君笑尘

赞同来自:

但是,除了报头单元覆盖几列的情况之外,还经常发现头部单元覆盖两条线的表。

这是一个例子。 厘米。
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>


这里
http://jsfiddle.net/u3qw0cnn/1/
.

裸奔

赞同来自:

互联网互联网接入计划网站 W3C /WAI/ 谈到使用结构 markup, 如下所示。

/请注意,可视化 markup 网站上的示例表与示例中所示的略有不同 markup. 请参阅链接并检查表的示例。/

来源:
https://www.w3.org/WAI/tutorials/tables/irregular/

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

要回复问题请先登录注册