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

Question

大家好，自从我问问题以来已经有一段时间了，这是困扰我一段时间的事情，问题本身就在标题中：

您首选的编写具有垂直标题的 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 表，缺点是正确的表示需要一些

tbody

和

thead

标签的 CSS，并且标题和数据之间的关系不是很清楚因为我在创建标记时有疑问。

---

因此，这两种方式都会以应有的方式呈现表格，这里有一个图片：

如果您愿意，可以将标题放在左侧或右侧，那么，有什么建议、替代方案、浏览器问题吗？

Answer 1

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

参考：“THEAD、TFOOT 和 TBODY 部分必须包含相同数量的列。” - 第 11.2.3 节最后一段。

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

Answer 2

第一个选项...我认为这是更好且简单的方法..

Answer 3

老实说，选项 1。我建议您查看 W3.org 上的这个示例（链接如下）。我认为这种方法是最好的，因为这样你的标题也将在屏幕阅读器上得到正确的解释。

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

Answer 4

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>