web-dev-qa-db-ja.com

垂直ヘッダーを持つHTMLテーブルを記述する最も一般的な方法は？

こんにちは、私が何かを聞いてからしばらく経ちました。これはしばらく私を悩ませてきたものです。質問自体はタイトルにあります：

垂直ヘッダーを持つHTMLテーブルを記述するための望ましい方法は何ですか？

垂直ヘッダーとは、テーブルにヘッダー（<th>）左側のタグ（通常）

ヘッダー1データデータデータ
ヘッダー2データデータデータ
ヘッダーデータデータデータ

彼らはこのように見えますが、これまでのところ私は2つのオプションを考え出しました

最初のオプション


    <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>タグが欠落しており、一緒に配置された要素を壊すことなくそれらを含める方法はありません。これは、2番目のオプションにつながります。

2番目のオプション


        <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が必要であり、ヘッダーとデータの関係マークアップを作成するときに疑問があったため、あまり明確ではありません。

したがって、両方の方法でテーブルをどのようにレンダリングするか、ここでは落とし穴です：

render
左側または右側のヘッダーがある場合は、提案、代替案、ブラウザーの問題はありますか？

htmlcssdatatablesemantic-markup
83
Tristian

まず、2番目のオプションは、テーブル内のすべての行（TR）に同数の列（TD）を含める必要があるという意味で、あまり有効なHTMLではありません。ヘッダーには1、本文には3があります。これを修正するには、colspan属性を使用する必要があります。

参照： "THEAD、TFOOT、およびTBODYセクションには同じ数の列が含まれている必要があります。" - セクション11.2.3の最後の段落 。

ということで、CSSを有効にしているかどうかに関係なく読みやすいので、最初のオプションは私の意見ではより良いアプローチです。一部のブラウザー（または検索エンジンクローラー）はCSSを実行しないため、ヘッダーが行ではなく列を表すため、データが意味をなさないようになります。

41
Francois Deschenes

最初のオプション...私はそれがより良くてシンプルなアプローチだと思います。

5
Philemon philip Kunjumon

正直なところ、オプション1です。W3.orgからこの例をご覧になることをお勧めします（以下のリンク）。この方法が最適だと思います。なぜなら、この方法で見出しもスクリーンリーダーで正しく解釈されるからです。

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

1
Dmitri Chebotarev

テーブルにデータバインドコントロール要素（aspリピーターなど）を表示する場合、最初のオプションは使用できません。 2番目のオプションは次のように使用できます。

<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>
0
Barry Guvenkaya