大家好，我已经有一段时间没有问过什么问题了，这件事已经困扰我一段时间了，问题本身就在标题中：
你喜欢用什么方法来编写有垂直标题的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标签，而且标题和数据之间的关系不是很清楚，因为我有我的怀疑时，创建标记。
因此，这两种方法都能按照它应该的方式呈现表格，这里是一个陷阱：

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