BAB 6 – TABEL BOOTSTRAP
Tujuan Pembelajaran
Peserta mampu membuat tabel profesional.
A. Tabel Dasar
<table class="table">
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Budi</td>
</tr>
</table>B. Table Striped
<table class="table table-striped">C. Table Hover
<table class="table table-hover">D. Table Bordered
<table class="table table-bordered">Praktik 1
Data Siswa
<table class="table table-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>XI RPL</td>
</tr>
</tbody>
</table>E. Table Responsif
<div class="table-responsive">
<table class="table">
</table>
</div>Praktik 2
Buat tabel data barang kasir:
- Kode Barang
- Nama Barang
- Harga
- Stok
Latihan Bab
- Apa fungsi table-striped?
- Apa fungsi table-hover?
- Apa fungsi table-bordered?
- Mengapa tabel perlu responsif?
- Apa fungsi table-responsive?
TUGAS PRAKTEK
Buat tabel data siswa:
| NIS | Nama |
|---|---|
| 1001 | Budi |
| 1002 | Siti |
| 1003 | Rina |
Menggunakan:
table-striped
table-hover