编写带有垂直标题的 HTML 表格的最常见方法? [英] Most common way of writing a HTML table with vertical headers?

问题描述

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

<块引用>

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

垂直标题我的意思是表格在左侧(通常)有标题()标签

<块引用>

标题 1 数据数据数据
标题 2 数据数据数据
Header 3 数据数据数据

它们看起来像这样，到目前为止我想出了两个选择

第一个选项

<前><代码><table id="vertical-1"><caption>第一种方式</caption><tr><th>标题1</th><td>数据</td><td>数据</td><td>数据</td></tr><tr><th>头2</th><td>数据</td><td>数据</td><td>数据</td></tr><tr><th>头2</th><td>数据</td><td>数据</td><td>数据</td></tr>

这种方式的主要优点是你在它代表的数据旁边有标题(实际上是左边)，但是我不喜欢的是 <thead>, <tbody> 和 <tfoot> 标签丢失，并且没有办法在不破坏很好地放置在一起的元素的情况下包含它们，这导致我选择第二个选项.

第二个选项

<前><代码><style type="text/css">#vertical-2 thead,#vertical-2 tbody{显示:内联块；}</风格><table id="vertical-2"><caption>第二种方式</caption><头><tr><th colspan="3">标题 1</th></tr><tr><th colspan="3">Header 2</th></tr><tr><th colspan="3">标题 3</th></tr></thead><tr><td>第1行</td><td>第1行</td><td>第1行</td></tr><tr><td>数据</td><td>数据</td><td>数据</td></tr><tr><td>数据</td><td>数据</td><td>数据</td></tr></tbody><脚><tr><td colspan="4">页脚</td></tr></tfoot>

这里的主要优点是你有一个完全描述性的 html 表，缺点是适当的表示需要一些 CSS 来用于 tbody 和 thead 标签，并且标题和数据之间的关系不是很清楚，因为我在创建标记时有疑问.

<小时>

所以，两种方式都以它应该的方式呈现表格，这里是一个pitcure:

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

解决方案

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

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

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

Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:

What's your preferred way of writing HTML tables that have vertical headers?

By vertical header I mean that the table has the header (<th>) tag on the left side (generally)

Header 1 data data data
Header 2 data data data
Header 3 data data data

They look like this, so far I've come up with two options

First Option

   
    <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>
   

The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.

Second Option

   
        <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>
   

The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.

---

So, both ways render the table how it should, here a pitcure:

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

解决方案

First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.

Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.

With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.

这篇关于编写带有垂直标题的 HTML 表格的最常见方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！