我怎样才能构造一个表头，而不是跨越HTML中的多行？

我想build立一个表格如下：

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

如果TH元素只有1行，那么我怎样才能构造列头行？ 分层表似乎不是一个好的select，因为列的宽度不会排队，我也不能使用TH标记与colspan两行。

Answer 1

这是我将如何做（工作小提琴在http://jsfiddle.net/7pDqb/ ）在Chrome中testing。

 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> 

Answer 2

你不小心使用了rowspan而不是colspan ？ 或者您不小心忘记了closures标签？

从tvanfosson的答案扩展，我会使用的th元素的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> 

Answer 3

但是，除了跨越多列的标题单元格外，还常常看到具有跨两行的标题单元格的表格。

这是一个例子。 请参阅下面的第col 5和data5 col 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> 

这是小提琴 。