Membuat Tabel dengan Bootstrap

Membuat Tabel dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat tabel dengan menggunakan Bootstrap.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Contoh Tabel dengan Bootstrap</title>
</head>
<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">No</th>
          <th scope="col">Nama</th>
          <th scope="col">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>John Doe</td>
          <td>johndoe@example.com</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jane Smith</td>
          <td>janesmith@example.com</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Michael Johnson</td>
          <td>michaeljohnson@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
HTML
Contoh Tabel dengan Bootstrap
NoNamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Membuat tabel dengan Striped Rows

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Contoh Tabel dengan Bootstrap</title>
</head>
<body>
  <div class="container">
   <table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael Johnson</td>
      <td>michaeljohnson@example.com</td>
    </tr>
  </tbody>
</table>
  </div>
</body>
</html>
HTML
Contoh Tabel dengan Bootstrap
NoNamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Dengan menggunakan kelas table dan table-striped dari Bootstrap, kita dapat membuat tabel dengan baris bergaris. Kelas table digunakan untuk mengatur tampilan tabel secara umum, sedangkan kelas table-striped digunakan untuk memberikan efek garis pada setiap baris tabel.

Pada contoh di atas, kita memiliki tabel dengan tiga kolom yaitu “No”, “Nama”, dan “Email”. Setiap baris tabel memiliki nomor urut, nama, dan alamat email. Baris-baris tabel tersebut akan memiliki efek garis bergantian berkat penggunaan kelas table-striped.

Membuat Bordered Table dan table striped

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Contoh Tabel dengan Bootstrap</title>
</head>
<body>
  <div class="container">
 <table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael Johnson</td>
      <td>michaeljohnson@example.com</td>
    </tr>
  </tbody>
</table>

  </div>
</body>
</html>
HTML
Contoh Tabel dengan Bootstrap
NoNamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Anda dapat menyalin kode di atas dan memasukkannya ke dalam file HTML Anda. Tabel ini akan memiliki garis tepi (border) dan baris bergaris (striped rows) yang diatur oleh kelas-kelas Bootstrap table-bordered dan table-striped.

Tabel Hover Rows dan table striped

HTML
<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael Johnson</td>
      <td>michaeljohnson@example.com</td>
    </tr>
  </tbody>
</table>
HTML
Contoh Tabel dengan Bootstrap
NoNamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Dengan menggunakan kelas table-hover dan table-striped dari Bootstrap, kita dapat membuat efek hover rows dan striped rows pada tabel. Efek hover rows akan memberikan highlight pada baris tabel saat kursor diarahkan ke atasnya, sedangkan striped rows akan memberikan warna latar yang berbeda secara bergantian pada setiap baris tabel.

Tabel Black/Dark dan Table Striped

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Contoh Tabel dengan Bootstrap</title>
</head>
<body>
  <div class="container">

<table class="table table-dark table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nama</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael Johnson</td>
      <td>michaeljohnson@example.com</td>
    </tr>
  </tbody>
</table>

  </div>
</body>
</html>
HTML
Contoh Tabel dengan Bootstrap
#NamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Dengan menggunakan kelas table-dark dan table-striped pada elemen <table>, kita dapat membuat tabel dengan tampilan black/dark dan baris yang bergaris-garis.

Kelas table-dark digunakan untuk memberikan warna latar belakang hitam pada tabel, sedangkan kelas table-striped digunakan untuk memberikan efek garis-garis pada baris tabel.

Table Borderless

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Tabel Borderless</title>
</head>
<body>
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col">No</th>
        <th scope="col">Nama</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Michael Johnson</td>
        <td>michaeljohnson@example.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
HTML
Tabel Borderless
NoNamaEmail
1John Doejohndoe@example.com
2Jane Smithjanesmith@example.com
3Michael Johnsonmichaeljohnson@example.com

Tabel Contextual Classes

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Tabel Bootstrap</title>
</head>
<body>

  <table class="table">
  <thead>
    <tr>
      <th scope="col">Nama</th>
      <th scope="col">Usia</th>
      <th scope="col">Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>John Doe</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr class="table-success">
      <td>Jane Smith</td>
      <td>30</td>
      <td>Bandung</td>
    </tr>
    <tr class="table-danger">
      <td>Michael Johnson</td>
      <td>35</td>
      <td>Surabaya</td>
    </tr>
    <tr class="table-warning">
      <td>Sarah Lee</td>
      <td>28</td>
      <td>Yogyakarta</td>
    </tr>
  </tbody>
</table>
  
</body>
</html>
HTML
Tabel Bootstrap
NamaUsiaKota
John Doe25Jakarta
Jane Smith30Bandung
Michael Johnson35Surabaya
Sarah Lee28Yogyakarta

Dalam contoh di atas, kita menggunakan kelas table dari Bootstrap untuk membuat tabel. Kemudian, kita menggunakan kelas table-primary, table-success, table-danger, dan table-warning untuk memberikan warna latar belakang yang berbeda pada setiap baris tabel.

Kelas table-primary memberikan latar belakang biru pada baris pertama tabel, table-success memberikan latar belakang hijau pada baris kedua, table-danger memberikan latar belakang merah pada baris ketiga, dan table-warning memberikan latar belakang kuning pada baris keempat.

Anda dapat menyesuaikan kode di atas dengan menambahkan atau mengubah kolom dan baris sesuai kebutuhan Anda. Selain itu, Anda juga dapat mengganti warna garis pada baris dengan menggunakan CSS tambahan.

Sekarang Anda dapat menerapkan contoh kode di atas pada halaman HTML Anda untuk membuat tabel dengan baris bergaris menggunakan Bootstrap.

Artikel Terbaru ⭐