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

大家好,我已经有一段时间没有问过这个问题了,这个问题一直困扰着我,问题本身就在标题里:

您喜欢用什么方式来编写具有垂直标题的 HTML 表?

通过垂直标题,我的意思是表的标题(<th>)标签在左侧(通常)

头1 数据数据
头2 数据数据
头3 数据数据数据

They look like this, so far I've come up with two options

第一个选择


<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>标签丢失了,而且没有办法在不破坏精心放置在一起的元素的情况下包含它们,这导致了我的第二个选项。

第二个选择


<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 作为 tbodythead的标签,而且标题和数据之间的关系不是很清楚,因为我在创建标记时有疑问。


因此,这两种方法都能使这张桌子达到它应该达到的效果,这里是一个焦点:

render
如果你喜欢的话,可以把标题放在左边或者右边,那么,有什么建议,替代方案,浏览器问题吗?

118175 次浏览

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.

参考文献: “ theAD、 TFOOT 和 TBODY 部分必须包含相同数量的列。”-第11.2.3节的最后一段

说到 ,我认为第一个选项是更好的方法,因为不管我是否启用了 CSS,它都是可读的。一些浏览器(或搜索引擎爬虫)不使用 CSS,因此,它会使您的数据变得毫无意义,因为头部将表示列而不是行。

第一个选择... 我认为这是更好和简单的方法. 。

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.

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

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>

如果要在表中显示数据绑定控件元素(如 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>