编写带有垂直标题的 HTML 表格的最常见方法？ [关闭]

您编写具有垂直标题的 HTML 表格的首选方式是什么？

通过垂直标题我的意思是表格有标题（<th>) 标签位于左侧（通常）

Header 1数据数据数据
Header 2数据数据数据
Header 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> and <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 and thead标签以及标题和数据之间的关系不是很清楚，因为我在创建标记时有疑问。

因此，这两种方法都会以应有的方式呈现表格，请听一张图片：

With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?

首先，您的第二个选项不是完全有效的 HTML，因为表中的所有行 (TR) 应包含相同数量的列 (TD)。您的标头有 1，而正文有 3。您应该使用 colspan 属性来解决这个问题。

参考：“THEAD、TFOOT 和 TBODY 部分必须包含相同数量的列。” -第 11.2.3 节最后一段 http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3.

话虽这么说，我认为第一个选项是更好的方法，因为无论我是否启用了 CSS，它都是可读的。某些浏览器（或搜索引擎爬虫）不执行 CSS，因此，它会使您的数据毫无意义，因为标题将代表列而不是行。