Tutorial Bootstrap #3 | Membuat Table
Tutorial Bootstrap#3 – Membuat tabel
menggunakan framework bootstrap. Jika kalian ingin mengikuti tutorial bootstrap
ini, agar lebih mudah dipahami kalian bisa membaca artikel sebelumnya di;
-
Bootstrap#2 – Starter Template
Table, Dikutip dari weschool.id table
merupakan daftar yang didalamnya berisi berbagai data informasi yang biasanya
ditulis secara sistematis. Seringkali terdapat tabel yang digunakan didalam
halaman web untuk memperindah tampilan dan mengatur informasi agar dapat dibaca
dengan baik.
Dalam HTML, table memiliki tag, diantaranya;
Tag <table></table>
Tag <thead></thead>
Tag <tbody></tbody>
Tag <tr></tr>
Tag <th></th>
Tag <td></td>
Membuat table menggunakan framework Bootstrap.
Table #1
<table class="table">
<thead>
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>Table #2 | Table Dark
<table class="table table-dark">
<thead>
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>Table #3 | Thead Dark & Light
<table class="table">
<thead class="thead-dark">
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table><table class="table">
<thead class="thead-light">
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>Table #4 | Table Striped
<table class="table table-striped">
<thead>
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>Table #5 | Table Dark Striped
<table class="table table-dark table-striped">
<thead>
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>Table #6 | Table Bordered
<table class="table table-bordered">
<thead>
<tr>
<th>NO</th>
<th>SATU</th>
<th>DUA</th>
<th>TIGA</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>2</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
<tr>
<td>3</td>
<td>satu</td>
<td>dua</td>
<td>tiga</td>
</tr>
</tbody>
</table>
Post a Comment