最常见的编写具有垂直头的HTML表的方法？ [英] Most common way of writing a HTML table with vertical headers?
问题描述
您好，我已经问了一段时间，这是一个困扰我一段时间，问题本身是在标题：
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:
您最喜欢的编写具有垂直头的HTML表格的方式是什么？
What's your preferred way of writing HTML tables that have vertical headers?
该表在左侧具有标题（< th> ）标签
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
标题1 数据数据数据
标题2 数据数据数据
标题3 数据数据数据
Header 1 data data data
Header 2 data data data
Header 3 data data data
他们看起来像这样，到目前为止我想出了两个选项
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> 标签丢失，并且没有办法包括它们没有破坏放在一起的元素，这导致我的第二个选项。 >
第二个选项
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.
<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的 tbody 和 thead 标签，标题和数据之间的关系是非常清楚，因为我在创建标记时有疑问。
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 tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
，here a pitcure：
So, both ways render the table how it should, here a pitcure:
如果您愿意，可以使用左侧或右侧的标题，以及任何建议，替代方案和浏览器问题？
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
推荐答案
首先，您的第二个选项不是非常有效的HTML，因为表中的所有行（TR）应该包含相等数量的列（TD）。
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节的最后一段。
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
有了，第一个选项是我认为更好的方法，因为它是可读的，不管我是否启用了CSS。一些浏览器（或搜索引擎抓取工具）不做CSS，因此，它会使你的数据没有意义，因为头将代表列而不是行。
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.
这篇关于最常见的编写具有垂直头的HTML表的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
