最佳答案
大家好,我已经有一段时间没有问过这个问题了,这个问题一直困扰着我,问题本身就在标题里:
您喜欢用什么方式来编写具有垂直标题的 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 作为 tbody
和 thead
的标签,而且标题和数据之间的关系不是很清楚,因为我在创建标记时有疑问。
因此,这两种方法都能使这张桌子达到它应该达到的效果,这里是一个焦点:
如果你喜欢的话,可以把标题放在左边或者右边,那么,有什么建议,替代方案,浏览器问题吗?