编写带有垂直标题的 HTML 表格的最常见方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6368061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Most common way of writing a HTML table with vertical headers?
提问by Tristian
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
大家好，我已经有一段时间没有问了，这是困扰我一段时间的问题，问题本身就在标题中：
What's your preferred way of writing HTML tables that have vertical headers?
编写具有垂直标题的 HTML 表格的首选方式是什么？
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
通过垂直标题，我的意思是表格<th>的左侧有标题 ( ) 标签（通常）
Header 1data data data
Header 2data data data
Header 3data data data
头1数据数据数据
头2数据数据数据
头3数据数据数据
They look like this, so far I've come up with two options
它们看起来像这样，到目前为止我想出了两个选择
First Option
第一个选项
<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>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody>and <tfoot>tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
这种方式的主要优点是你在它代表的数据旁边有标题（实际上是左边），但是我不喜欢的是<thead>,<tbody>和<tfoot>标签丢失，并且没有办法在不破坏的情况下包含它们将元素很好地放在一起，这让我想到了第二个选项。
Second Option
第二种选择
<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>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbodyand theadtags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
这里的主要优点是你有一个完全描述性的 html 表，缺点是适当的表示需要一些 CSStbody和thead标签，标题和数据之间的关系不是很清楚，因为我在创建时有疑问标记。
So, both ways render the table how it should, here a pitcure:
因此，这两种方式都以它应该的方式呈现表格，这里有一个 pitcure：
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
如果您愿意，可以将标题放在左侧或右侧，那么，有什么建议、替代方案、浏览器问题吗？
采纳答案by Francois Deschenes
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
首先，您的第二个选项不是非常有效的 HTML，因为表中的所有行 (TR) 都应包含相同数量的列 (TD)。您的标题有 1，而正文有 3。您应该使用 colspan 属性来解决这个问题。
Reference:"The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
参考：“THEAD、TFOOT 和 TBODY 部分必须包含相同数量的列。” -第 11.2.3 节的最后一段。
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
话虽如此，我认为第一个选项是更好的方法，因为无论是否启用 CSS，它都是可读的。某些浏览器（或搜索引擎爬虫）不执行 CSS，因此，它会使您的数据变得毫无意义，因为标题将代表列而不是行。
回答by Philemon philip Kunjumon
The First Option... I think it is the better and simple approach..
第一个选项......我认为这是更好和简单的方法..
回答by Dmitri Chebotarev
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
老实说，选项 1。我建议您查看 W3.org 中的这个示例（链接如下）。我认为这种方法是最好的，因为这样您的标题也将在屏幕阅读器上正确解释。
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
回答by Barry Guvenkaya
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
如果要在表中显示数据绑定控件元素（如 asp 中继器），则无法使用第一个选项。可以按如下方式使用第二个选项。
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr><th colspan="0">hours:</th></tr>
<tr><th colspan="1">Monday</th></tr>
<tr><th colspan="1">Tuesday</th></tr>
<tr><th colspan="1">Wednesday</th></tr>
<tr><th colspan="1">Thursday</th></tr>
<tr><th colspan="1">Friday</th></tr>
<tr><th colspan="1">Saturday</th></tr>
<tr><th colspan="1">Sunday</th></tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr><td><%# Container.DataItem %></td></tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
回答by Deenathaiyalan Shanmugam
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>