同じ<table>に複数の<tbody>を含めることはできますか？

594

<tbody>同じ中に複数のタグを含めることはできます<table>か？はいの場合、どのシナリオで複数の<tbody>タグを使用する必要がありますか？

html  html-table  xhtml 
— ジテンドラ・ビアス
ソース

回答:

710

はい、使用できます。たとえば、次のように、データのグループをより簡単にスタイルするために使用します。

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }
<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>
スニペットを展開

ここで例を見ることができます。それは新しいブラウザーでのみ機能しますが、現在のアプリケーションではそれをサポートしています。JavaScriptなどのグループ化を使用できます。主なことは、データをはるかに読みやすくするために行を視覚的にグループ化する便利な方法です。 。もちろん他にも用途はありますが、当てはまる例としては、これが一番一般的な使い方です。

— ニッククレイバー
ソース
6
いい答えをありがとう。スクリーンリーダーの問題は1つtbodyですか、それとも複数ですか。
— Jitendra Vyas 2010年
1
@ metal-gear-solid-私の経験では、それらは問題なく処理されます。例：それらが1つであるかのように<tbody>。テーブルをネストし始めると、通常、それがスクリーンリーダーの実際のナビゲーション問題になります。
— Nick Craver
10
@metal：いいえ、意味の違いがあります- <tbody>回答で説明されているように、複数の要素はテーブル内の個別のグループを表します。また、背景のセルをターゲットにする方が一般的には良いので、CSSは、たとえばtbody:nth-child(odd) td { background: #f5f5f5; }
— DisgruntledGoat
4
「新しいブラウザ」の定義は何ですか？
— ティム・ダウン
8
@TimDown-私が「新しいブラウザ」と言ったとき、それは:nth-child()リンクされたデモのCSS 使用法のみを参照していたので、複数の<tbody>ブラウザで機能します。
— Nick Craver
298

はい。DTDから

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

したがって、1つ以上を期待しています。それは言い続けます

テーブル行のグループ間でルールが必要な場合は、複数のtbodyセクションを使用します。

— マーティン・スミス
ソース
12
HTML5仕様の時点では、これは若干変更されていますが、基本的な「はい、複数のtbody要素で問題ありません」が残っています。具体的には、必要に応じて、1つのtfoot要素をの後に配置tbodyできるようになりました。彼らはそれを提供しないと言うことによって。）:-)
— TJ Crowder 2013
5
この応答をありがとう。仕様を参照することは、私の本の中で一番の答えです。
— KernelCurry 2014
1
したがって、1つ以上を期待しています。これは間違っています。それは1つのセットである可能性がある<tr>ため、ゼロになる可能性もあります（つまり、tbodyまたはtrは単にtrであり、tbodyでない可能性があることを意味します。）
— Alexis Wilke
@AlexisWilkeこれは、仕様によると当てはまります。TBODY開始タグは常に必要です。ただし、テーブルにテーブルボディが1つだけ含まれ、テーブルヘッドまたはフットセクションがない場合は例外です
— Gecko IT
14

マーティンジョイナーの問題は、<caption>タグの誤解が原因です。

<caption>タグは、テーブルキャプションを定義します。

<caption>タグは、最初の子でなければなりません<table>タグ。

テーブルごとに1つのキャプションのみを指定できます。

また、scope属性は<th>要素ではなく要素に配置する必要があることに注意してください<tr>。

マルチヘッダー、マルチtbodyテーブルを書き込む適切な方法は、次のようになります。

<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>Fish</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Chips</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Peas</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Gravy</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Pizza</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Salad</td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Oil</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Bread</td>
        </tr>
    </tbody>
</table>
スニペットを展開

— ジョン・スレガーズ
ソース
captionタグは、開口部の従うべきtableタグを。 developer.mozilla.org/en-US/docs/Web/HTML/Element/table
— Cypher
あなたが正しい。どういうわけかドキュメントを誤って解釈しました。エラーを修正しました。
— John Slegers 2014年
仕様では、ヘッダーにscope="rowgroup"（の代わりにcol）を使用することを推奨していtbodyます。例を参照してください。
— CletusW
7

はい。コースなど、テーブルの関連部分を動的に非表示/表示するために使用します。Viz。

<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>

ボタンを用意して、多数の行を個別に処理せずにtbodyを操作することで、すべてを切り替えることも、現在の日付のみを切り替えることもできます。

— CPslashM
ソース
4

編集：captionタグはテーブルに属しているため、1回だけ存在する必要があります。私のようにcaption各tbody要素にa を関連付けないでください： 

<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>

上記の悪い例：コピーしないでください

上記の例は、captionタグの誤解を示しているため、期待どおりに表示されません。標準に反するため、正しくレンダリングするためには多くのCSSハックが必要になります。

captionタグでW3​​C標準を検索しましたcaptionが、テーブルごとに要素は1 つだけでなければならないという明示的なルールは見つかりませんでしたが、実際はそうです。

— マーティンジョイナー
ソース
3

さらに、HTML5 DOCTYPEを使用して、W3CのHTML Validator<tbody>を介して複数のタグを含むHTMLドキュメントを実行すると、正常に検証されます。

— ベルン
ソース
2

私はJSFiddleを作成しました。ここには、テーブルを持つ2つのネストされたng-repeatsと、tbody上の親ng-repeatがあります。テーブルの行を調べると、6つのtbody要素、つまり親レベルがあることがわかります。

HTML

<div>
        <table class="table table-hover table-condensed table-striped">
            <thead>
                <tr>
                    <th>Store ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Cost</th>
                    <th>Sales</th>
                    <th>Revenue</th>
                    <th>Employees</th>
                    <th>Employees H-sum</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="storedata in storeDataModel.storedata">
                <tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
                    <td>{{storedata.store.storeId}}</td>
                    <td>{{storedata.store.storeName}}</td>
                    <td>{{storedata.store.storeAddress}}</td>
                    <td>{{storedata.store.storeCity}}</td>
                    <td>{{storedata.data.costTotal}}</td>
                    <td>{{storedata.data.salesTotal}}</td>
                    <td>{{storedata.data.revenueTotal}}</td>
                    <td>{{storedata.data.averageEmployees}}</td>
                    <td>{{storedata.data.averageEmployeesHours}}</td>
                </tr>
                <tr data-ng-show="dayDataCollapse[$index]">
                    <td colspan="2">&nbsp;</td>
                    <td colspan="7">
                        <div>
                            <div class="pull-right">
                                <table class="table table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date [YYYY-MM-dd]</th>
                                            <th>Cost</th>
                                            <th>Sales</th>
                                            <th>Revenue</th>
                                            <th>Employees</th>
                                            <th>Employees H-sum</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
                                            <td class="pullright">
                                                <button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
                                                </button>
                                            </td>
                                            <td>{{dayData.date}}</td>
                                            <td>{{dayData.cost}}</td>
                                            <td>{{dayData.sales}}</td>
                                            <td>{{dayData.revenue}}</td>
                                            <td>{{dayData.employees}}</td>
                                            <td>{{dayData.employeesHoursSum}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

（補足：両方のレベルに大量のデータがある場合、これはDOMを埋めるので、データをフェッチして置き換えるディレクティブに取り組んでいます。つまり、親をクリックしたときにDOMに追加し、別の親または同じ親がクリックされたときに削除します。もう一度説明します。Prisjakt.nuで見られるような動作を得るには、リストされたコンピューターまでスクロールして行（リンクではない）をクリックすると、そのようにして要素を調べると、trが追加されていることがわかります。次に、親が再度クリックされた場合、または別の場合に削除されます。）

— ピクシック
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.