Cara membuat kotak di bootstrap

Question

Pada kesempatan kali ini Kelas programmer melanjutkan seri belajar tentang bootstrap bagi pemula yang ingin belajar cara membuat tabel dengan bootstrap. Sebelumnya sudah saya bahas mengenai tabel di html, namun pada tutorial tersebut hanya berfokus pada penggunaan tabel pada html saja tanpa mengulas mengenai bagaimana mempercantik tampilan tabel html tersebut.

Table of Contents Show

Keuntungan membuat tabel dengan Bootstrap
Bagaimana untuk memulai menggunakan ?
Jenis-jenis tabel pada Bootstrap
1. Basic tabel
2. Tabel Striped
3. Tabel Bordered
4. Hover Rows
5. Dark Table
Kombinasi Jenis Tabel pada Bootstrap
Membuat Tabel Responsive
Apa itu Table hover?
Class apa yang digunakan untuk membuat button yang besar?

Bootstrap menyediakan fasilitas untuk membuat tampilan tabel menjadi lebih bagus. Kita dapat mengatur seperti header tabel, membuat efek hover ketika cursor mouse melewati rows (baris) tabel dan lain-lain. Penggunannyapun cukup mudah kita hanya perlu memanggil komponen-komponen tabel pada library bootstrap dengan menggunakan atribut class. Selain itu juga tabel pada bootstrap mendukung responsive desain, agar tabel bisa tampil dengan baik diberbagai jenis perangkat komputer maupun smartphone.

Pertanyaannya kenapa harus memilih bootstrap untuk mendesain tabel html kita ? jawabannya sederhana karena bootstrap memiliki banyak keunggulan dibandingkan jika kita mendesain tabel dengan css sendiri. Jika kita menggunakan css maka tentu kita perlu direpotkan untuk mendesain dengan css yang saya yakin kebanyakan orang saat ini belum banyak menguasai css. Itu sebabnya pilihan terbaik adalah menggunakan bootstrap untuk mendesain tabel html kita.

Daftar Isi

Keuntungan membuat tabel dengan Bootstrap

Mudah digunakan
Dokumentasi jelas dan terstruktur
Banyak fitur dan fasilitas yang diberikan
Dapat disinkronkan dengan plugin pihak ketiga lainnya seperti DataTable
Tampilan tabel bisa responsive

Bagaimana untuk memulai menggunakan ?

Untuk memulai menggunakan bootstrap pada tabel maka perlu kita mendownload bootstrap atau menggunakan CDN (Content Delivery Network) .
Baca disini : Cara menggunakan bootstrap pada website

Jenis-jenis tabel pada Bootstrap

Banyak jenis tabel yang dapat dibuat memakai bootstrap, penggunaannya terbilang mudah, kita hanya tinggal memanggil dengan atribut class. Berikut saya bahas satu persatu:

1. Basic tabel

Basic table merupakan tabel yang paling basic dari bootstrap. Untuk menggunakan jenis tabel ini dapat menggunakan class table

Contoh basic table

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="container">
 <table class="table">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Jenis Kelamin</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Dimas</td>
        <td>Laki-laki</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ari</td>
        <td>Laki-laki</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Safitri</td>
        <td>Perempuan</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

hasil output:

2. Tabel Striped

Tabel striped adalah tabel yang mempunyai warna baris yang berselang seling. Penggunaan tabel ini digunakan untuk kita dapat melihat jelas baris per baris dari setiap tabel. Untuk membuat tabel striped cukup mengganti syntax pada tag <tabel class=’table table-striped’>

3. Tabel Bordered

Sesuai namanya tabel ini menggunakan border atau garis untuk kerangka tabelnya. untuk menggunakan tabel ini ganti syntax diatas pada bagian <table class=’table table-bordered’>

4. Hover Rows

Merupakan jenis tabel untuk membuat efek hover pada baris tabel yang disentuh atau dilalui oleh cursor pengguna. Untuk menggunakan tabel ini cukup memakai <table class=’table table-hover’>

5. Dark Table

Tabel jenis ini untuk membuat tabel gelas dengan warna hitam. Untuk menggunakannya dengan memakai <table class=’table table-dark’>

Kombinasi Jenis Tabel pada Bootstrap

Bootstrap menyediakan fasilitas untuk kita dapat mengkombinasikan dua atau lebih jenis tabel yang ingin kita gunakan. Misanya jika kita ingin menggunakan tabel border namun ingin mempunyai efek hover maka perlu kita kombinasikan kedua tabel tersebut. Bagaimana caranya ? berikut adalah contohnya

#1 Kombinasi bordered table dengan table striped

Untuk mengkombinasi kedua tabel cukup dengan memanggil class masing-masing tabel pada tag <table> yaitu : <table class=’table table-bordered table-striped’>

#2 Kombinasi dark table dengan table striped

Karena tabel ini mempunyai dua unsur jenis tabel yaitu table dark dan table striped, maka kita perlu memanggil kedua class tersebut pada tag tabel contoh : <table classs=’table table-dark table-striped’>

Selain kombinasi yang saya contohkan diatas, kalian bisa mengkombinasikan dengan jenis table yang lain sesuai kebutuhan kalian saat membuat tabel. Yang terpenting adalah penamaan class untuk jenis-jenis table tidak boleh salah, karena jika salah maka tabel bootstrap tidak akan tampil.

Membuat Tabel Responsive

Saat ini telah banyak jenis perangkat yang berkembang seperti smartphone, tablet, netbook dan lain-lain. Setiap perangkat tentu memiliki spesifikasi ukuran layar yang berbeda-beda. Itu sebabnya saat kita ingin membuat aplikasi web maka tentu elemen aplikasi kita harus dapat mengikuti dan support untuk berbagai spesifikasi perangkat yang berbeda-beda tersebut.

Bootstrap merupakan framework css yang support pada responsive desain. salah satu komponen bootstrap yang responsive adalah tabel, stuktur dasar responsive tabel pada bootstrap adalah sebagai berikut

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

Contoh:

Pada contoh kali ini saya menambahkan beberapa kolom agar dapat terlihat responsive

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="container">
<div class="table-responsive">
 <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Jenis Kelamin</th>
		<th>contoh</th>
		<th>contoh</th>
		<th>contoh</th>
		<th>contoh</th>
		<th>contoh</th>
		<th>contoh</th>
		<th>contoh</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Dimas</td>
        <td>Laki-laki</td>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
	    <th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
      </tr>
      <tr>
        <td>2</td>
        <td>Ari</td>
        <td>Laki-laki</td>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
	    <th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
      </tr>
      <tr>
        <td>3</td>
        <td>Safitri</td>
        <td>Perempuan</td>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
		<th>Ya</th>
      </tr>
    </tbody>
  </table>
</div>
</div>
</body>
</html>

Dapat kita lihat pada gambar diatas bahwa tabel tersebut walaupun berada pada ukuran layar yang kecil jika dibandingkan dengan kolom tabel tersebut yang banyak, namun tabel diatas tetap bisa menampilkan isi tabel dengan baik. Kita hanya perlu menggeser ke kanan untuk melihat isi kolom lainnya pada tabel tersebut. Berbeda jika kita tidak menggunakan responsive table, yang akan kita geser bukan pada tabelnya namun pada halaman web browser tersebut.

Kesimpulan

Dari pembahasan mengenai cara membuat tabel di bootstrap dapat saya simpulkan bahwa dengan bootstrap kita dapat dengan mudah membuat desain tabel yang bagus dan profesional tanpa harus menggunakan style css tambahan. Dengan banyak pilihan jenis-jenis tabel pada bootstrap maka tentunya menjadi keuntungan tersediri menggunakan framwork css yang paling populer ini. Selain itu yang sangat membantu adalah bootstrap mempunyai fasilitasi tabel responsive untuk dapat support diberbagai jenis perangkat dari ukuran layar masing-masing yang berbeda, namun tetap dapat menampilkantabel dengan baik.