HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tabel Bootstrap

❮ Sebelumnya Berikutnya ❯

Tabel Dasar Bootstrap

Tabel Bootstrap dasar memiliki bantalan ringan dan hanya pembagi horizontal.

Kelas .tablemenambahkan gaya dasar ke tabel:

Contoh

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Baris bergaris

Kelas .table-stripedmenambahkan garis-garis zebra ke tabel:

Contoh

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabel Berbatasan

Kelas .table-borderedmenambahkan batas di semua sisi tabel dan sel:

Contoh

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Arahkan ke Baris

Kelas .table-hovermenambahkan efek hover (warna latar belakang abu-abu) pada baris tabel:

Contoh

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabel Kental

Kelas .table-condensedmembuat tabel lebih ringkas dengan memotong bantalan sel menjadi dua:

Contoh

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Kelas Kontekstual

Kelas kontekstual dapat digunakan untuk mewarnai baris tabel ( <tr>) atau sel tabel ( <td>):

Contoh

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Kelas kontekstual yang dapat digunakan adalah:

Kelas Keterangan
.active Menerapkan warna hover ke baris tabel atau sel tabel
.success Menunjukkan tindakan yang berhasil atau positif
.info Menunjukkan perubahan atau tindakan informatif yang netral
.warning Menunjukkan peringatan yang mungkin perlu diperhatikan
.danger Menunjukkan tindakan yang berbahaya atau berpotensi negatif

Tabel Responsif

Kelas .table-responsivemembuat tabel responsif. Tabel kemudian akan bergulir secara horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada sesuatu yang lebih besar dari lebar 768px, tidak ada perbedaan:

Contoh

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan atribut kelas untuk menata tabel sebagai tabel Bootstrap dasar.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Referensi Tabel Bootstrap Lengkap

Untuk referensi lengkap dari semua kelas tabel, buka Referensi Tabel Bootstrap lengkap kami .


❮ Sebelumnya Berikutnya ❯