Aynı <table> içinde birden fazla <tbody> olabilir mi?

<tbody>Aynı anda birden fazla etiket alabilir miyiz <table>? Evet ise, hangi senaryolarda birden fazla <tbody>etiket kullanmalıyız ?

Evet, bunları kullanabilirsiniz, örneğin bunları veri gruplarına daha kolay stil vermek için kullanıyorum, örneğin:

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>

Burada bir örnek görüntüleyebilirsiniz . Sadece yeni tarayıcılarda çalışır, ancak şu anki uygulamamda desteklediğim şey budur, JavaScript vb. İçin gruplamayı kullanabilirsiniz. . Elbette başka kullanımları da var, ancak uygulanabilir örneklere göre, bu benim için en yaygın olanı.

Evet. Gönderen DTD

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

Yani bir veya daha fazlasını bekliyor. Sonra söylemeye devam ediyor

Tablo satır grupları arasında kurallara ihtiyaç duyulduğunda birden çok tbody bölümü kullanın .

Bu örneğe göre yapılabilir: w3-struct-tables .

Martin Joiner'ın sorunu <caption>etiketin yanlış anlaşılmasından kaynaklanıyor .

<caption>Etiketi bir tablo başlığını tanımlar.

<caption>Etiketi ilk çocuğu olmalı <table>etiketi.

Tablo başına yalnızca bir resim yazısı belirtebilirsiniz.

Ayrıca, scopeözelliğin bir <th>öğeye değil, bir <tr>öğeye yerleştirilmesi gerektiğini unutmayın .

Çok başlı çok gövdeli bir tablo yazmanın doğru yolu şöyle olacaktır:

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

Evet. Bunları bir tablonun ilgili bölümünü, örneğin bir dersi dinamik olarak gizlemek / göstermek için kullanıyorum. Yani.

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

Birçok satırı tek tek işlemeden tbodies manipüle edilerek her şey veya sadece geçerli gün arasında geçiş yapmak için bir düğme sağlanabilir.

EDIT: captionetiketi tabloya aittir ve bu nedenle sadece bir kez olmalıdır. A'yı captionher tbodyyaptığım öğeyle ilişkilendirmeyin :

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

YUKARIDA KÖTÜ ÖRNEK: KOPYALAMA

Yukarıdaki örnek beklediğiniz gibi görüntülenmez, çünkü böyle yazmak captionetiketin yanlış anlaşıldığını gösterir . Standartlara aykırı olacağınız için doğru şekilde görüntülenmesi için çok sayıda CSS kesmek gerekir.

Etikette W3Cs standartlarını aradım captionama captiontablo başına sadece bir eleman olması gerektiğini belirten açık bir kural bulamadım ama aslında durum böyle.

Buna ek olarak, bir HTML belgesini W3C'nin HTML Doğrulayıcısı<tbody> aracılığıyla bir HTML5 DOCTYPE ile birden çok etiketle çalıştırırsanız, belge başarıyla doğrulanır.

Tablolar ile iki iç içe ng-tekrarlar ve tbody üst ng-tekrar var bir JSFiddle oluşturduk . Tablodaki herhangi bir satırı incelerseniz, altı tbody öğesi, yani üst seviye olduğunu görürsünüz.

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>

(Yan not: Her iki düzeyde de çok fazla veri varsa bu DOM doldurur, bu nedenle veri almak ve değiştirmek için bir yönerge üzerinde çalışıyorum, yani üst tıklarken DOM eklemek ve başka bir tıklatıldığında veya aynı üst öğe kaldırma Prisjakt.nu'da bulduğunuz davranışları elde etmek için, listelenen bilgisayarlara ilerleyip satıra (bağlantıları değil) tıklarsanız, bunu yapar ve öğeleri incelerseniz , bir tr eklendiğini ve daha sonra üst öğe tekrar tıklanırsa kaldırılır.)