BOOTSTRAP PART 2: Membuat Table Dengan Tabel
MEMBUAT TABLE DENGAN BOOTSTRAP
ASSALAMUALAIKUM WR WB
Pada kali ini saya akan membahas tentang cara membuat table dengan bootstrap caranya sebagai berikut.
1.Maksud dan tujuan
untuk lebih memahami tentang cara penggunaan bootstrap dalam membuat table.
2.Materi.
cara mendesign table dengan bootstrap.
1.table bordered.
digunakan untuk perbatasan disemua sisi table dan sel.
dibawah ini contoh scriptnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>membut table bordered</title>
</head>
<body>
<div class="container">
<p>Membuat mendesign table dengan bootstrap</p>
<table class="table table-bordered">
<thead>
<tr>
<th>nama</th>
<th>username</th>
<th>alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>yaya</td>
<td>yaya123@gmail.com</td>
<td>karanganyar</td>
</tr>
<tr>
<td>alif</td>
<td>alifsulthoni@gmail.com</td>
<td>jayapura</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>membut table bordered</title>
</head>
<body>
<div class="container">
<p>Membuat mendesign table dengan bootstrap</p>
<table class="table table-bordered">
<thead>
<tr>
<th>nama</th>
<th>username</th>
<th>alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>yaya</td>
<td>yaya123@gmail.com</td>
<td>karanganyar</td>
</tr>
<tr>
<td>alif</td>
<td>alifsulthoni@gmail.com</td>
<td>jayapura</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
dan ini hasilnya:
2.table-kontekstual.
digunakan untuk memberikan warna pada baris table atau sel table.
contoh script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>membut table bordered</title>
</head>
<body>
<div class="container">
<p>Membuat mendesign table dengan bootstrap</p>
<table class="table">
<thead>
<tr>
<th>nama</th>
<th>username</th>
<th>alamat</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="danger">
<td>yaya</td>
<td>yaya123@gmail.com</td>
<td>karanganyar</td>
</tr>
<tr>
<tr class="info">
<td>alif</td>
<td>alifsulthoni@gmail.com</td>
<td>jayapura</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>membut table bordered</title>
</head>
<body>
<div class="container">
<p>Membuat mendesign table dengan bootstrap</p>
<table class="table">
<thead>
<tr>
<th>nama</th>
<th>username</th>
<th>alamat</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="danger">
<td>yaya</td>
<td>yaya123@gmail.com</td>
<td>karanganyar</td>
</tr>
<tr>
<tr class="info">
<td>alif</td>
<td>alifsulthoni@gmail.com</td>
<td>jayapura</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ini hasilnya:
Kelas yang kontekstual yang dapat digunakan adalah:
kelas Deskripsi
.active:Berlaku warna melayang ke baris tabel atau sel tabel
.success:Menunjukan 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
kelas Deskripsi
.active:Berlaku warna melayang ke baris tabel atau sel tabel
.success:Menunjukan 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
3.table responsive
membuat tabel responsif. Meja kemudian akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px lebar, tidak ada perbedaan:
ini scriptnya:
Semoga terima kasih telah berkunjung semoga bermanfaat.
REFERENSI:
WASSALAMUALAIKUM WR WB.
Komentar
Posting Komentar