Dalam pertemuan kali ini, saya akan memaparkan mengenai pembuatan tabel dengan bootstrap.
Bootstrap Tabel
Bootstrap Tabel Dasar
Sebuah Bootstrap Tabel Dasar memiliki padding cahaya dan hanya pembagi horizontal.
Tag kelas .table menambahkan styling dasar untuk label.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Tabel Dasar</h2>
<p>Kelas .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>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Tabel bergaris
Tag kelas .table-striped menambahkan line-striped ke tabel.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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 Bergaris</h2>
<p>Kelas .table-bergaris menambahkan baris-bergaris ke meja:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Bordered Tabel
Tag kelas .table-bordered menambahkan perbatasan di semua sisi dari tabel dan sel.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Tabel berbatasan</h2>
<p>Kelas .table-berbatasan menambahkan perbatasan ke meja:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Tabel Hover
Tag kelas .table-hover menambahkan efek hover (warna abu-abu latar belakang) pada baris tabel.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Kelas .table-melayang memungkinkan negara hover 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>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Tabel Kondensed
Tag kelas .table-condensed membuat tabel lebih kompak dengan memotong bantalan sel setengah.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Tabel Kenatal</h2>
<p>Kelas .table-kental membuat meja lebih kompak dengan memotong bantalan sel setengah:</p>
<table class="table table-condensed">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr>
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Kelas Kontekstual
Kelas kontekstual dapat digunakan untuk warna baris tabel (<tr>) atau sel tabel (<td>).
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Kelas Kontekstual</h2>
<p>kelas 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>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allif</td>
<td>Sulthoni</td>
<td>allif.sa354@gmail.com</td>
</tr>
<tr class="success">
<td>Revo</td>
<td>Alderi</td>
<td>revoalderi@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil
Kelas yang kontekstual yang dapat digunakan adalah.
Kelas Deskripsi
.active Berlaku warna melayangke 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
Tag kelas .table-responsive membuat tabel responsif. Tabel kemudian akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari lebar 768px, tidak ada perbedaan.
Contoh
<!DOCTYPE html>
<html>
<head>
<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>Kelas .table-responsif 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>Nama Depan</th>
<th>Nama Belakang</th>
<th>Usia</th>
<th>Kota</th>
<th>Negara</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Allif</td>
<td>Sulthoni</td>
<td>17 Tahun</td>
<td>Karanganyar</td>
<td>Indonesia</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hasil
REFERENSI
http://www.w3schools.com/bootstrap/bootstrap_tables.asp
No comments:
Post a Comment