Table merupakan suatu elemen yang didalamnya memuat baris dan kolom.
Dengan menggunakan table, data yang kita simpan akan terorganisir dan teridentifikasi dengan baik.
Penggunaan table yang sudah sering kita temui dalam kehidupan sehari-hari yaitu sebagai rekap nilai, data diri mahasiswa, catatan keuangan, dsb.
Sedangkan, didalam membuat sebuah desain web, tak jarang para developer dalam membuat sebuah tampilan web juga menggunakan elemen table.
Misal, table biasa digunakan untuk menentukan tata letak navbar / icon-icon didalam header, lalu table juga biasa digunakan untuk mengatur tata letak isi form (form login, form sign in, dll.), Atau juga.. table juga digunakan untuk mengatur tata letak footer yang biasa memuat informasi contact, abuout me, dsb.
Untuk keperluan hal tersebut, Bootstrap telah menyediakan kerangka kerja yang mempermudah kita sebagai seorang developer web untuk membuat sebuah tampilan dengan menggunakan table.
. . .
Baik, langsung saja kita menuju ke tutorialnya.
Didalam Bootstrap, elemen table juga dibuat dengan menggunakan tag <table>, namun perlu untuk menginputkan class .table didalam tag tersebut.
Berikut contoh penggunaannya.
< table class= "table">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Akan menghasilkan output.
Contoh diatas merupakan table murni atau table yang belum memiliki style / desain sama sekali.
Selanjutnya, kita akan membuat table dengan tampilan menggunakan utilitas color.
Table Color
Table color digunakan memberikan warna latar belakang pada table yang akan dibuat.
Penerapan warna untuk table yang pertama yaitu untuk membuat table zebra atau strip tables.
Perhatikan program berikut.
< table class= "table table-striped">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Menghasilkan tampilan.
Secara default, warna striped-nya berwarna abu-abu.
Atau jika kita ingin membuat striped table pada bagian kolom, cukup kita tambahkan properti -columns.
Perhatikan program berikut.
< table class= "table table-striped-columns">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Menghasilkan tampilan.
Selain itu, kita juga dapat membuat table dengan background yang dapat kita kustom sendiri.
Perhatikan program berikut.
< table class= "table table-success">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Pada program diatas tertulis class .table table-success yang berarti, .table yang pertama merupakan class untuk membuat table, sedangkan .table-success yang kedua merupakan class untuk membuat latar belakang table.
Maka akan menghasilkan tampilan.
Kita juga dapat membuat warna latar untuk head table-nya saja.
Perhatikan program berikut.
< table class= "table">
< thead class= "table-primary">
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Cukup kita tambahkan class .table-[color] didalam tag <thead>.
Menghasilkan tampilan.
Atau.. jika kita ingin membuat warna latar belakang untuk tiap baris table, dapat menggunakan perintah class sebagai berikut.
< table class= "table">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr class= "table-primary">
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr class= "table-warning">
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr class= "table-success">
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Untuk class-nya kita letakkan pada tiap-tiap tag <tr> atau tag untuk membuat row table.
Menghasilkan output.
Selanjutnya, kita akan membuat tampilan table border.
Table Border
Table border digunakan untuk memberikan border / garis tepi untuk tiap baris dan kolomnya.
Perhatikan program berikut.
< table class= "table table-bordered">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Didalam tag <table> kita cukup menambahkan class .table-bordered.
Maka, akan menghasilkan tampilan.
Selanjutnya, kita akan membuat table tanpa border.
Nah.. ini merupakan metode yang biasa digunakan untuk membuat form log in, form sign in, atau seperti sudah saya sebutkan diatas.
Dihilangkannya border table, bertujuan untuk membuat tampilan lebih bersih dan tampilan akan terlihat natural.
Perhatikan program berikut.
< table class= "table table-borderless">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
class yang kita gunakan yaitu .table-borderless.
Maka, akan menghasilkan tampilan.
Table Hover
Table hover digunakan untuk memberikan efek block warna ketika pointer mouse yang kita gunakan tepat berada pada table yang disentuh.
Hal ini bertujuan untuk mempermudah pembaca dalam membaca isi table, apalagi jika table tersebut memuat data sangat banyak dan panjang.
Perhatikan program berikut.
< table class= "table table-bordered table-hover">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Kita cukup menambahkan class .table-hover didalam tag <table>.
Coba letakkan pointer mouse atau tekan baris table berikut.
| No. | Nama | Nrp | Jurusan |
|---|---|---|---|
| 1 | Agung | 21436577 | Informatika |
| 2 | Budi | 21436578 | Elektro |
| 3 | Bandi | 21436579 | Sipil |
Itu tadi merupakan penggunaan hover didalam table.
Small Tables
Small tables digunakan untuk membuat ukuran table terlihat menjadi kecil, hal ini bertujuan untuk menghemat ruang pada table tersebut.
Berikut merupakan contoh penggunaannya.
< table class= "table table-sm">
< thead>
< tr>
< th> No.</ th>
< th> Nama</ th>
< th> Nrp</ th>
< th> Jurusan</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> Agung</ td>
< td> 21436577</ td>
< td> Informatika</ td>
</ tr>
< tr>
< td> 2</ td>
< td> Budi</ td>
< td> 21436578</ td>
< td> Elektro</ td>
</ tr>
< tr>
< td> 3</ td>
< td> Bandi</ td>
< td> 21436579</ td>
< td> Sipil</ td>
</ tr>
</ tbody>
</ table>
Menghasilkan tampilan.
Jika kita bandingkan dengan table-table sebelumnya, terlihat bahwa table dengan ukuran small ini seperti tidak memiliki padding pada tiap-tiap row-nya.
.table-sm saja, tidak tersedia untuk ukuran -md, -lg, -xl, dan -xxl.
Post a Comment
Post a Comment