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

Question

大家好,我已经问了一段时间,这一直困扰着我一段时间,问题本身就在标题中:

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

通过垂直标题我的意思是该表<th>在左侧(通常)具有header()标记

标题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>标签丢失,而且也没有办法,包括他们没有打破nicelly将元素放在一起,这引导我进入第二种选择.

第二选择

   
        <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标签的CSS,并且标题和数据之间的关系不是很清楚,因为我在创建时有疑虑标记.

---

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

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

Answer 1

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

参考: "THEAD,TFOOT和TBODY部分必须包含相同数量的列." - 第11.2.3节的最后一段.

话虽如此,在我看来,第一种选择是更好的方法,因为无论我是否启用了CSS,它都是可读的.某些浏览器(或搜索引擎抓取工具)不会执行CSS,因此,它会使您的数据无意义,因为标题将代表列而不是行.

Answer 2

第一选择......我认为这是更好,更简单的方法..