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


594

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

Jawaban:


710

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.


6
ok terima kasih atas jawaban yang bagus. Apakah penting bagi pembaca layar, satu tbodyatau beberapa?
Jitendra Vyas

1
@ metal-gear-solid - Dalam pengalaman saya, mereka menanganinya dengan baik, misalnya: seolah-olah mereka satu <tbody>. Saat Anda mulai tabel sarang , itulah yang biasanya memberikan masalah navigasi nyata untuk pembaca layar.
Nick Craver

10
@metal: tidak, ada perbedaan semantik - beberapa <tbody>elemen menjelaskan grup terpisah dalam tabel, seperti yang dijelaskan dalam jawaban. Saya juga harus menambahkan bahwa umumnya lebih baik menargetkan sel untuk latar belakang, jadi CSS seharusnya, misalnya,tbody:nth-child(odd) td { background: #f5f5f5; }
DisgruntledGoat

4
Apa definisi dari "browser yang lebih baru"?
Tim Down

8
@TimDown - ketika saya mengatakan "browser yang lebih baru" itu hanya merujuk pada :nth-child()penggunaan CSS untuk demonstrasi yang ditautkan, banyak yang <tbody>akan bekerja di browser apa pun.
Nick Craver

298

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.


12
Sampai dengan HTML5 spec, perubahan ini sedikit, tetapi fundamental "ya, beberapa tbodyelemen baik-baik saja) sisa-sisa. Secara khusus, Anda sekarang diizinkan untuk menempatkan satu tfootelemen setelah satu tbodyjika Anda suka . (Mereka rapi sisi-melangkah aspek DTD dengan mengatakan mereka tidak menyediakan satu .) :-)
TJ Crowder

5
Terima kasih atas tanggapan ini. Referensi referensi adalah jawaban # 1 di buku saya.
KernelCurry

1
Jadi diharapkan satu atau lebih. Ini salah, mungkin satu set <tr>sehingga bisa juga nol (yaitu tbody atau tr berarti hanya tr dan tidak ada tbody.)
Alexis Wilke

@AlexisWilke ini benar sesuai dengan spesifikasi: Tag awal TBODY selalu diperlukan kecuali ketika tabel hanya berisi satu tubuh tabel dan tidak ada bagian kepala atau kaki meja
Gecko IT


14

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>


The captiontag harus mengikuti pembukaan tabletag. developer.mozilla.org/en-US/docs/Web/HTML/Element/table
Cypher

Kamu benar. Saya entah bagaimana salah menafsirkan dokumen. Saya memperbaiki kesalahan.
John Slegers

Spec merekomendasikan penggunaan scope="rowgroup"(bukan col) untuk tbodyheader. Lihat Contoh .
CletusW

7

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.


4

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.


3

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


2

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.