使用垂直标题编写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>
