编写带垂直标题的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表，缺点是正确的表示需要一些CSS的tbody和thead标签，并且标题和数据之间的关系不是很明确，因为我怀疑在创建标记时。

---

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

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

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

如果要在表中显示数据绑定控件元素（如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>