使用垂直标题编写HTML表格的最常见方法是什么?

大家好,我已经问了一些问题,这个问题已经困扰了我一段时间,问题本身就是标题:

编写具有垂直标题的HTML表格的最佳方式是什么?

通过垂直标题,我的意思是表格左边的标题( <th> )标记(通常)

标题1数据数据数据
标题2数据数据数据
标题3数据数据数据

他们看起来像这样,到目前为止我已经提出了两个select

第一select

   <table id="vertical-1"> <caption>First Way</caption> <tr> <th>Header 1</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> </table>
<table id="vertical-1"> <caption>First Way</caption> <tr> <th>Header 1</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> </table> 

这种方式的主要优点是你的头部右边(实际上是左边)它所代表的数据旁边,但是我不喜欢的是<thead><tbody><tfoot>标签缺失,没有办法把他们包括在内,而不会打破这些很好地放在一起的元素,这导致了我的第二个select。

第二个选项

   <style type="text/css"> #vertical-2 thead,#vertical-2 tbody{ display:inline-block; } </style> <table id="vertical-2"> <caption>Second Way</caption> <thead> <tr> <th colspan="3">Header 1</th> </tr> <tr> <th colspan="3">Header 2</th> </tr> <tr> <th colspan="3">Header 3</th> </tr> </thead> <tbody> <tr> <td>row 1</td> <td>row 1</td> <td>row 1</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">Footer</td> </tr> </tfoot> </table>
<style type="text/css"> #vertical-2 thead,#vertical-2 tbody{ display:inline-block; } </style> <table id="vertical-2"> <caption>Second Way</caption> <thead> <tr> <th colspan="3">Header 1</th> </tr> <tr> <th colspan="3">Header 2</th> </tr> <tr> <th colspan="3">Header 3</th> </tr> </thead> <tbody> <tr> <td>row 1</td> <td>row 1</td> <td>row 1</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">Footer</td> </tr> </tfoot> </table> 

这里的主要优点是你有一个完全描述性的html表格,缺点是适当的表示需要一些CSS和thead标签,并且标题和数据之间的关系不是很清楚,因为我有我的疑惑当创build标记。


所以,这两种方式使得桌子应该如何,在这里是一个pitcure:

给予
如果你愿意的话,在左侧或右侧的标题,所以,任何build议,替代scheme,浏览器的问题?

首先,第二个选项并不是非常有效的HTML,因为表中的所有行(TR)都应包含相同数量的列(TD)。 你的头部有1,而主体有3个。你应该使用colspan属性来解决这个问题。

参考: “THEAD,TFOOT和TBODY部分必须包含相同数量的列”。 – 第11.2.3节的最后一段

这样说 ,第一个选项是我认为更好的方法,因为它是可读的,不pipe我是否启用了CSS。 一些浏览器(或search引擎爬虫)不会做CSS,因此,它会使您的数据没有意义,因为头将代表行而不是行。

第一select…我认为这是更好,更简单的方法..

老实说,选项1.我build议你从W3.org看这个例子(下面的链接)。 我认为这种方法是最好的,因为这样你的标题也将被屏幕阅读器正确解释。

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

[最佳链接] [ http://www.broculos.net/2013/12/vertical-text-for-table-headers-with-css.html%5D

 div.vertical { margin-left: -85px; position: absolute; width: 215px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); /* Safari/Chrome */ -moz-transform: rotate(-90deg); /* Firefox */ -o-transform: rotate(-90deg); /* Opera */ -ms-transform: rotate(-90deg); /* IE 9 */ } th.vertical { height: 220px; line-height: 14px; padding-bottom: 20px; text-align: left; } 
 <table> <thead> <tr> <th class="vertical"> <div class="vertical">Really long and complex title 1</div> </th> <th class="vertical"> <div class="vertical">Really long and complex title 2</div> </th> <th class="vertical"> <div class="vertical">Really long and complex title 3</div> </th> </tr> </thead> <tbody> <tr> <td>Example</td> <td>a, b, c</td> <td>1, 2, 3</td> </tr> </tbody> </table>