Cara Mudah Membuat Tabel Dengan Bootsrap
Setelah sebelumnya kita telah belajar dasar dan tata cara menggunakan bootsrap untuk pemula, kali ini kita akan lanjut membuat tabel dengan bootsrap.
Ada beberapa kelebihan apabila kita membuat tabel dengan bootsrap yakni kita dapat dengan mudah mendesain tampilan tabel sesuai dengan keinginan kita dengan hanya menambahkan class bootsrap.
Ada beberapa class yang digunakan didalam bootsrap sebagai berikut:
table
class ini digunakan untuk membuat tabel standar seperti biasa.
table-striped
class ini digunakan untuk membuat tampilan tabel dengan strip, atau baris tabel yang warnanya selang-seling.
table-hover
class tambahan untuk memberikan efek apabila mouse pointer melewati tabel maka akan berubah warna pada tabel.
table-bordered
Digunakan tabel dengan memiliki garis.
Cara membuat tabel dengan bootsrap standar sebagai berikut
Pertama kita siapkan satu buah file dengan nama tabel.php kemudian ketik kode dibawah :
tabel.php
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootsrap di ilmuweb.net</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>Cara Membuat table dengan Bootstrap | Ilmuweb.net </h3>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Pekerjaan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arsya Adinda</td>
<td>Jakarta</td>
<td>Pegawai Bank</td>
</tr>
<tr>
<td>2</td>
<td>Irwan Hakim</td>
<td>Bandung</td>
<td>Pegawai</td>
</tr>
</tr>
<tr>
<td>3</td>
<td>Arif Iskandar</td>
<td>Solo</td>
<td>Wiraswasta</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hasilnya seperti gambar dibawah
Membuat tabel dengan tampilan garis
Selanjutnya kita akan membuat tabel dengan tampilan bergaris, kita tinggal menambahkan class (table-bordered)
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootsrap di ilmuweb.net</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>Cara Membuat table dengan Bootstrap | Ilmuweb.net </h3>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Pekerjaan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arsya Adinda</td>
<td>Jakarta</td>
<td>Pegawai Bank</td>
</tr>
<tr>
<td>2</td>
<td>Irwan Hakim</td>
<td>Bandung</td>
<td>Pegawai</td>
</tr>
</tr>
<tr>
<td>3</td>
<td>Arif Iskandar</td>
<td>Solo</td>
<td>Wiraswasta</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hasilnya seperti gambar dibawah.
Membuat tabel dengan warna strip
Kemudian kita akan membuat tabel dengan warna selang seling atau strip, dengan menambahkan class ( table-bordered table-striped )
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootsrap di ilmuweb.net</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>Cara Membuat table dengan Bootstrap | Ilmuweb.net </h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Pekerjaan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arsya Adinda</td>
<td>Jakarta</td>
<td>Pegawai Bank</td>
</tr>
<tr>
<td>2</td>
<td>Irwan Hakim</td>
<td>Bandung</td>
<td>Pegawai</td>
</tr>
</tr>
<tr>
<td>3</td>
<td>Arif Iskandar</td>
<td>Solo</td>
<td>Wiraswasta</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hasilnya seperti gambar dibawah :
Membuat tabel rasponsive dengan bootsrap.
Untuk membuat desain tampilan tabel responsive kita tinggal menambahkan class <div class=”table-responsive”> sebelum tag tabel yang kita buat. dengan tabel responsiv ini kegunaanya adalah apabila tapilan ukuran layar dibuka menggukan mobile langsung muncul scroll otomatis sehingga tabel tetap utuh.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootsrap di ilmuweb.net</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>Cara Membuat table dengan Bootstrap | Ilmuweb.net </h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Pekerjaan</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arsya Adinda</td>
<td>Jakarta</td>
<td>Pegawai Bank</td>
</tr>
<tr>
<td>2</td>
<td>Irwan Hakim</td>
<td>Bandung</td>
<td>Pegawai</td>
</tr>
</tr>
<tr>
<td>3</td>
<td>Arif Iskandar</td>
<td>Solo</td>
<td>Wiraswasta</td>
</tr>
</tbody>
</table>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hasilnya seperti gambar berikut :
Bagaimana mudah bukan kita membuat berbagai tampilan tabel dengan bootsrap, tinggal menambahkan class dan disesuaikan dengan kebutuhan anda, selamat mencoba 🙂 salam sukses penuh keberkahan.
