Dokumentasi dan contoh untuk gaya tabel opt-in (mengingat penggunaannya yang lazim di plugin JavaScript) dengan Bootstrap.
Di halaman ini
Ringkasan
Karena meluasnya penggunaan <table>elemen di widget pihak ketiga seperti kalender dan pemilih tanggal, tabel Bootstrap dipilih . Tambahkan kelas dasar .tableke any <table>, lalu perluas dengan kelas pengubah opsional atau gaya kustom kami. Semua gaya tabel tidak diwarisi di Bootstrap, artinya setiap tabel bersarang dapat ditata secara independen dari induknya.
Menggunakan markup tabel paling dasar, inilah .tabletampilan tabel berbasis di Bootstrap.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Varian
Gunakan kelas kontekstual untuk mewarnai tabel, baris tabel, atau sel individual.
Kelas
Menuju
Menuju
Bawaan
Sel
Sel
Utama
Sel
Sel
Sekunder
Sel
Sel
Kesuksesan
Sel
Sel
Bahaya
Sel
Sel
Peringatan
Sel
Sel
Info
Sel
Sel
Lampu
Sel
Sel
Gelap
Sel
Sel
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.
Meja beraksen
Baris bergaris
Gunakan .table-stripeduntuk menambahkan zebra-striping ke baris tabel mana pun dalam file <tbody>.
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
<tableclass="table table-striped">
...
</table>
Kelas-kelas ini juga dapat ditambahkan ke varian tabel:
Kita mulai dengan mengatur latar belakang sel tabel dengan --bs-table-bgproperti kustom. Semua varian tabel kemudian menyetel properti khusus itu untuk mewarnai sel tabel. Dengan cara ini, kita tidak mendapat masalah jika warna semi-transparan digunakan sebagai latar belakang tabel.
Kemudian kita menambahkan bayangan kotak inset pada sel tabel dengan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lapisan di atas yang ditentukan background-color. Karena kita menggunakan spread besar dan tidak blur, warnanya akan monoton. Karena --bs-table-accent-bgtidak disetel secara default, kami tidak memiliki bayangan kotak default.
Ketika salah satu .table-striped, .table-hoveratau .table-activekelas ditambahkan, --bs-table-accent-bgdiatur ke warna semitransparan untuk mewarnai latar belakang.
Untuk setiap varian tabel, kami menghasilkan --bs-table-accent-bgwarna dengan kontras tertinggi tergantung pada warna itu. Misalnya, warna aksen untuk .table-primarylebih gelap sedangkan .table-darkmemiliki warna aksen yang lebih terang.
Warna teks dan batas dihasilkan dengan cara yang sama, dan warnanya diwarisi secara default.
Sel tabel <thead>selalu vertikal sejajar ke bawah. Sel tabel di <tbody>mewarisi perataannya dari <table>dan disejajarkan ke atas secara default. Gunakan kelas perataan vertikal untuk menyelaraskan kembali jika diperlukan.
Pos 1
Pos 2
Pos 3
Pos 4
Sel ini mewarisi vertical-align: middle;dari tabel
Sel ini mewarisi vertical-align: middle;dari tabel
Sel ini mewarisi vertical-align: middle;dari tabel
Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya.
Sel ini mewarisi vertical-align: bottom;dari baris tabel
Sel ini mewarisi vertical-align: bottom;dari baris tabel
Sel ini mewarisi vertical-align: bottom;dari baris tabel
Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya.
Sel ini mewarisi vertical-align: middle;dari tabel
Sel ini mewarisi vertical-align: middle;dari tabel
Sel ini sejajar dengan bagian atas.
Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Bersarang
Gaya batas, gaya aktif, dan varian tabel tidak diwarisi oleh tabel bertingkat.
Untuk mencegah gaya apa pun bocor ke tabel bersarang, kami menggunakan >pemilih kombinator anak ( ) di CSS kami. Karena kita perlu menargetkan semua tds dan ths di thead, tbody, dan tfoot, selektor kita akan terlihat cukup panjang tanpanya. Karena itu, kami menggunakan pemilih yang tampak agak aneh .table > :not(caption) > * > *untuk menargetkan semua tds dan ths dari .table, tetapi tidak ada tabel bersarang yang potensial.
Perhatikan bahwa jika Anda menambahkan <tr>s sebagai anak langsung dari tabel, itu <tr>akan dibungkus dengan a <tbody>secara default, sehingga membuat penyeleksi kita berfungsi sebagaimana dimaksud.
Ilmu urai
Kepala meja
Mirip dengan tabel dan tabel gelap, gunakan kelas pengubah .table-lightatau .table-darkuntuk membuat <thead>s tampak abu-abu terang atau gelap.
A <caption>berfungsi seperti heading untuk sebuah tabel. Ini membantu pengguna dengan pembaca layar untuk menemukan tabel dan memahami tentang apa itu dan memutuskan apakah mereka ingin membacanya.
Daftar pengguna
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry si Burung
@Indonesia
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Anda juga bisa meletakkannya <caption>di atas meja dengan .caption-top.
Daftar pengguna
#
Pertama
Terakhir
Menangani
1
Tanda
Otto
@mdo
2
Yakub
Thornton
@gemuk
3
Larry
burung
@Indonesia
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Tabel responsif
Tabel responsif memungkinkan tabel digulir secara horizontal dengan mudah. Jadikan tabel apa pun responsif di semua viewports dengan membungkusnya .tabledengan .table-responsive. Atau, pilih breakpoint maksimum yang dapat digunakan untuk membuat tabel responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Kliping/pemotongan vertikal
Tabel responsif memanfaatkan overflow-y: hidden, yang memotong konten apa pun yang melampaui tepi bawah atau atas tabel. Secara khusus, ini dapat memotong menu dropdown dan widget pihak ketiga lainnya.
Selalu responsif
Di setiap breakpoint, gunakan .table-responsiveuntuk menggulir tabel secara horizontal.
Gunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}seperlunya untuk membuat tabel responsif hingga breakpoint tertentu. Dari breakpoint itu dan ke atas, tabel akan berperilaku normal dan tidak menggulir secara horizontal.
Tabel ini mungkin tampak rusak hingga gaya responsifnya diterapkan pada lebar area pandang tertentu.