Membuat Tabel pada Bootstrap

Cara Menggunakan Bootstrap
4.8/5 (10)
Bootstrap
Membuat Tabel pada Bootstrap

Membuat Tabel pada Bootstrap. – Pada artikel sebelumnya, kita telah membahas Aturan Penulisan pada Bootstrap. Kali ini kita masih pada Tema Bootstrap, yaitu Membuat Tabel pada Bootstrap. Seperti biasa, yang kita pakai adalah class pada Bootstrap yang akan kita gunakan untuk membuat table.

Baca juga: Aturan Penulisan pada Bootstrap.

Membuat Tabel pada Bootstrap

Membuat tabel pada Bootstrap sangat mudah, hanya dengan menaggil class bawaan dari Bootstrap. Lalu kita bisa meng-kustom nya sendiri. Seperti memberi warna header gelap, bahkan membuat tabel responsive. Adapun class yang kita gunakan adalah,

  • .table > Class ini adalah class basic yang digunakan dalam Bootstrap.
  • .table-striped > Kita bisa membuat table yang tiap barisnya berbeda warna menggunakan class table-striped.
  • .table-bordered > Class ini memudahkan kita untuk memberi border pada table yang kita buat.
  • .table-hover > Memberikan efek hover (gray background) pada table kita.
  • .thead-dark > Class ini menjadikan warna header table menjadi gelap.
  • .thead-light > Ini adalah kebalikan dari thead-dark, yaitu memberi background grey pada header table.

Cara Membuat Table pada Bootstrap

Sekarang kita coba membuat table menggunakan Bootstrap. Yang pertama buat file index.html berisi kode berikut,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>codelatte.org/title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Contoh Penggunaan <code>.thead-dark</code> pada Bootstrap | codelatte.org</h2>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Nama</th>
        <th>Tempat Tinggal</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Andi</td>
        <td>Jakarta</td>
        <td>andi@example.com</td>
      </tr>
      <tr>
        <td>Susi</td>
        <td>Surabaya</td>
        <td>susi@example.com</td>
      </tr>
      <tr>
        <td>Gilang</td>
        <td>Medan</td>
        <td>gilang@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Hasilnya akan menjadi seperti ini,

Contoh Tabel pada Bootstrap
Contoh Tabel pada Bootstrap

 

Sebenarnya banyak sekali class untuk table pada Bootstrap. Kita bisa membuat tabel tanpa border, tabel kontekstual, bahkan sampai membuat tabel responsive. Kalian bisa lihat dibawah tentang class yang saya maksud diatas.

  • .table-dark
  • Kombinasi .table-dark dan .table-striped
  • .table-borderless
  • .table-primary
  • .table-success
  • .table-danger
  • .table-info
  • .table-warning
  • .table-active
  • .table-secondary
  • .table-sm > Tabel berukuran lebih kecil dari default.
  • .table-responsive

Sekian artikel kali ini, semoga bermanfaat dan sampai jumpa pada artikel berikutnya!

Please rate this

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *