Bisakah kita memiliki beberapa <tbody> dalam <tabel> yang sama?

Bisakah kita memiliki beberapa <tbody>tag yang sama <table>? Jika ya maka dalam skenario apa kita harus menggunakan banyak <tbody>tag?

Ya, Anda dapat menggunakannya, misalnya saya menggunakannya untuk mendesain grup data dengan lebih mudah, seperti ini:

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>

Anda dapat melihat contoh di sini . Ini hanya akan bekerja di browser yang lebih baru, tetapi itulah yang saya dukung dalam aplikasi saya saat ini, Anda dapat menggunakan pengelompokan untuk JavaScript dll. Hal utama adalah ini cara yang mudah untuk mengelompokkan baris secara visual untuk membuat data lebih mudah dibaca . Ada kegunaan lain tentu saja, tetapi sejauh contoh yang berlaku, yang ini adalah yang paling umum bagi saya.

Iya. Dari DTD

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

Jadi diharapkan satu atau lebih. Selanjutnya dikatakan

Gunakan beberapa bagian badan ketika aturan dibutuhkan antara kelompok baris tabel.

Menurut contoh ini dapat dilakukan: w3-struct-tables .

Masalah Martin Joiner disebabkan oleh kesalahpahaman pada <caption>tag.

The <caption>mendefinisikan sebuah caption tabel.

The <caption>tag harus menjadi anak pertama dari <table>tag.

Anda hanya dapat menentukan satu teks per tabel.

Perhatikan juga bahwa scopeatribut harus ditempatkan pada <th>elemen dan bukan pada <tr>elemen.

Cara yang tepat untuk menulis tabel multi-header multi-header adalah seperti ini:

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

Iya. Saya menggunakannya untuk menyembunyikan / mengungkapkan bagian tabel yang relevan secara dinamis, misalnya kursus. Yaitu.

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

Sebuah tombol dapat disediakan untuk beralih di antara semuanya atau hanya hari ini dengan memanipulasi tbodies tanpa memproses banyak baris secara terpisah.

EDIT: captionTag milik tabel dan karenanya hanya boleh ada satu kali. Jangan mengaitkan a captiondengan setiap tbodyelemen seperti yang saya lakukan:

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

CONTOH BURUK DI ATAS: JANGAN SALINAN

Contoh di atas tidak ditampilkan seperti yang Anda harapkan karena menulis seperti ini menunjukkan kesalahpahaman pada captiontag. Anda akan membutuhkan banyak peretas CSS untuk membuatnya render dengan benar karena Anda akan melanggar standar.

Saya mencari standar W3C pada captiontag tetapi tidak dapat menemukan aturan eksplisit yang menyatakan harus ada hanya satu captionelemen per tabel tapi itu sebenarnya kasusnya.

Selain itu, jika Anda menjalankan dokumen HTML dengan banyak <tbody>tag melalui Validator HTML W3C , dengan HTML5 DOCTYPE, itu akan berhasil divalidasi.

Saya telah membuat JSFiddle mana saya memiliki dua ng-repeats bersarang dengan tabel, dan orang tua ng-repeat pada tbody. Jika Anda memeriksa setiap baris dalam tabel, Anda akan melihat ada enam elemen tbody, yaitu level induk.

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>

(Catatan: Ini mengisi DOM jika Anda memiliki banyak data di kedua level, jadi oleh karena itu saya sedang mengerjakan arahan untuk mengambil data dan mengganti, yaitu menambahkan ke DOM ketika mengklik induk dan menghapus ketika orang lain diklik atau induk yang sama lagi. Untuk mendapatkan jenis perilaku yang Anda temukan di Prisjakt.nu , jika Anda gulir ke bawah ke komputer yang terdaftar dan klik pada baris (bukan tautan). Jika Anda melakukan itu dan memeriksa elemen Anda akan melihat bahwa tr ditambahkan dan kemudian dihapus jika orang tua diklik lagi atau yang lain.)