【发布时间】：2023-03-18 23:25:02
【问题描述】：
大家好，我已经有一段时间没有问了，这是困扰我一段时间的问题，问题本身就在标题中：
编写具有垂直标题的 HTML 表格的首选方式是什么？
垂直标题是指表格在左侧（通常）有标题（<th>）标签
表头 1 数据数据数据
表头 2 数据数据数据
表头 3 数据数据数据
它们看起来像这样，到目前为止我想出了两个选择
第一个选项
<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 标签，并且标题和数据之间的关系不是非常清楚，因为我在创建标记时有疑问。
所以，这两种方式都可以渲染表格，这里是一个pitcure：
如果您愿意，可以在左侧或右侧使用标题，那么，有什么建议、替代方案、浏览器问题吗？
【问题讨论】：
标签： html css datatable semantic-markup