第一个选项

   
    <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>和{ {1}}标签丢失，并且没有办法在不破坏放置在一起的元素的情况下包含它们，这导致我找到第二个选项。

第二选项

   <tfoot>

这里的主要优点是你有一个完全描述性的html表，缺点是正确的表示需要一些CSS <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>和tbody标签以及标题和数据不是很清楚，因为我在创建标记时有疑虑。

所以，两种方式都可以呈现表格，这里是一个pitcure：

render
如果您愿意，可以在左侧或右侧使用标题，那么，任何建议，替代方案，浏览器问题？

Answer 1

首先，在表中的所有行（TR）应包含相同数量的列（TD）的意义上，您的第二个选项不是非常有效的HTML。您的标题为1，而正文为3.您应该使用colspan属性来修复它。

参考：“THEAD，TFOOT和TBODY部分必须包含相同数量的列。” - Last paragraph of section 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

如果要在表中显示数据绑定的控制元素（如asp中继器），则第一个选项将无法使用。第二个选项可以如下使用。

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>

Answer 5

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>

编写带垂直标题的HTML表格的最常用方法是什么？

第一个选项

第二选项

5 个答案: