Assalamu'alaikum wr.wb
Kali ini saya akan membahas Cara membuat Tabel dengan Bootstrap.
Bootstrap Tabel Dasar
Sebuah tabel Bootstrap dasar memiliki padding cahaya dan hanya pembagi horizontal.Class .table menambahkan styling dasar untuk review tabel.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tabel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tabel Dasar</h2>
<p>Class table menambahkan styling dasar (bantalan ringan dan hanya pembagi horizontal) ke tabel:</p>
<table class="table">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Assegaf</td>
<td>ali@example.com</td>
</tr>
<tr>
<td>Dicky</td>
<td>Wahyu</td>
<td>dicky@example.com</td>
</tr>
<tr>
<td>Maftuh</td>
<td>Tamam</td>
<td>maftuh@example.com</td>
</tr>
<tr>
<td>Yoga</td>
<td>Adi</td>
<td>yoga@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil:
Border (Pembatas) Tabel
Class .table-border menambahkan pembatas ke tabel.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Border (Pembatas) Tabel</h2>
<p>Class table menambahkan styling dasar (bantalan ringan dan hanya pembagi horizontal) ke tabel:</p>
<table class="table">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Assegaf</td>
<td>ali@example.com</td>
</tr>
<tr>
<td>Dicky</td>
<td>Wahyu</td>
<td>dicky@example.com</td>
</tr>
<tr>
<td>Maftuh</td>
<td>Tamam</td>
<td>maftuh@example.com</td>
</tr>
<tr>
<td>Yoga</td>
<td>Adi</td>
<td>yoga@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil:
Baris Hover
Class .table-hover menambahkan efek hover (warna abu-abu latar belakang) pada baris tabel.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Baris Hover</h2>
<p>Class table-hover menambahkan efek hover (warna abu-abu latar belakang) pada baris tabel:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Assegaf</td>
<td>ali@example.com</td>
</tr>
<tr>
<td>Dicky</td>
<td>Wahyu</td>
<td>dicky@example.com</td>
</tr>
<tr>
<td>Maftuh</td>
<td>Tamam</td>
<td>maftuh@example.com</td>
</tr>
<tr>
<td>Yoga</td>
<td>Adi</td>
<td>yoga@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil:
Condensed Tabel
Class .condensed-table membuat tabel lebih kompak dengan memotong sel padding setengah.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Condensed Table</h2>
<p>Clas condensed-table membuat tabel lebih kompak dengan memotong sel padding setengah:</p>
<table class="table table-condensed">
<thead>
<tr>
<td>Ali</td>
<td>Assegaf</td>
<td>ali@example.com</td>
</tr>
<tr>
<td>Dicky</td>
<td>Wahyu</td>
<td>dicky@example.com</td>
</tr>
<tr>
<td>Maftuh</td>
<td>Tamam</td>
<td>maftuh@example.com</td>
</tr>
<tr>
<td>Yoga</td>
<td>Adi</td>
<td>yoga@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil:
Class Kontekstual
Class kontekstual dapat digunakan untuk mewarnai baris tabel atau sel tabel. Class-Class yang dapat digunakan adalah: .active, .success, .info, .warning, dan .danger.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Class kontekstual</h2>
<p>Class kontekstual dapat digunakan untuk mewarnai baris tabel atau sel tabel. Kelas-kelas yang dapat digunakan adalah: .active, .success, .info, .warning, dan .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil:
Kelas kontekstual yang dapat digunakan adalah:
| Kelas | Deskripsi |
|---|---|
.active |
Berlaku warna melayang ke baris tabel atau sel tabel |
.success |
Menunjukkan tindakan berhasil atau positif |
.info |
Menunjukkan perubahan informatif netral atau tindakan |
.warning |
Menunjukkan peringatan yang mungkin memerlukan perhatian |
.danger |
Menunjukkan tindakan yang berbahaya atau berpotensi negatif |
Tabel responsif
Class .table-responsive membuat tabel responsif yang akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px, lebar tidak ada perbedaan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tabel</h2>
<p>Class .table-responsive membuat tabel responsif yang akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px, lebar tidak ada perbedaan:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dicky</td>
<td>Wahyu</td>
<td>17</td>
<td>Jepara</td>
<td>Indonesia</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hasil:
Sekian Cara membuat Tabel dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi: www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon