Pagi ini om bewok bikin tutorial mengenai table pada bootstrap, wow ini bagian yang termasuk penting juga loh, apalagi kalau kalian ingin menampilkan isi database wah sudah pasti pake table dong, apalagi dengan menggunakan table bootstrap ini, sudah responsive jadi ga perlu di setting ulang lagi, keren kan ? untuk menghemat waktu mari kita praktekan dengan semangat walaupun jam 2 pagi.
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Ada beberapa class dalam pembuatan table, maksudnya gini untuk membuat table hanya digunakan 1 class, tapi untuk menambah seperti hover(jika disentuh maka berubah backgroundnya),border, background seperti zebra, dan lain - lain, dan itu semua di kerjakan dengan sangat mudah, hanya inget ya hanya memanggil class tersebut maka semua yang om bewok sebutkan tadi bisa di buat hanya memanggil class tadi,
om kalau memanggil semua dalam 1 table bisa ga om ? BISA BANGET BRO
OKE Sudah siap semua untuk belajar membuat table menggunakan bootstrap ?? yuk mulai.
kita buat yang standart dulu aja ya, kita buat table dengan class table yang mana class tersebut sudah di buat css nya oleh bootstrap nya sendiri.
1. DEFAULT BOOTSTRAP
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table ">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr>
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr>
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr>
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr>
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Maka Hasilnya seperti dibawah ini.
 |
| Gambar 1 Table Default Bootstrap |
Ini adalah standartnya dari bootstrap, nah kita custom deh yang sudah di berikan juga oleh bootstrap.
2.BORDER
yapp kayaknya kurang keren kalau ga ada kotak - kotak nya, Dengan menggunakan bootstrap kita tinggal panggil classnya yaitu table-bordered. Jika kamu belum tau border, border berfungsi untuk membuat atau menampilkan garis yang kita inginkan.
Codinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr>
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr>
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr>
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr>
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Maka hasilnya seperti dibawah ini ya.
 |
| Gambar 2 Tampilan Table Menggunakan Table-Bordered |
Om bewok hanya menambahkan seperti ini
<table class="table table-bordered">
Untuk class table saja memang akan mendapatkan default bootstrap seperti contoh yang pertama, lalu kita menambahkan table-bordered agar menjadi kotak - kotak lebih tepatnya membuat kotak karena border membuat garis kotak - kotaknya. Sisanya semua codinganya sama tidak ada yang diubah.
3.HOVER
Ada wanita yang bertanya.
Pradina : Ah om bewok masih bosen lihat table nya soalnya kurang menarik nih, aku pengen kalau di sentuh table-nya maka warna backgroundnya berubah.
Di bootstrap sangat mudah sekali seperti itu, tidak perlu edit css hanya menambahkan class di table. kecuali kalau teman - teman mau ganti warna backgroundnya kalian harus bikin css nya juga.
Codinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table table-hover">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr>
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr>
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr>
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr>
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Maka Hasilnya seperti dibawah ini ya
 |
| Gambar 3 Table Menggunakan hover |
Kita bisa lihat bahwa om bewok tadi menambahkan table-hover di class table tersebut. Mudah bukan ?
4.STRIPED ROWS
Ada wanita nanya lagi.
Pradina : PENGEN ZEBRAAAAAAAA.
Om bewok : Kamu mau hewan zebra ?
Pradina : Bukan aku mau table-nya warna - warni hitam putih biar kayak hidup aku, yang selalu bewarna.
Om bewok : Pelangi kali warna - warni tapi OKE BISA DI ATUR, apa sih yang ga bisa sama om bewok
Pradina : Dapat jodoh bisa ga om ?
Om Bewok : Om bewok jg single :( #nyanyiSedih.
Langsung aja, jangan bikin baper terusss tutorial ini!!!!
kita hanya menambahkan class table-striped.
Kodinganya bisa lihat di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr>
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr>
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr>
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr>
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Maka hasilnya seperti dibawah ini ya.
 |
| Gambar 4 Table Menjadi Zebra |
Keliatan ga ? tapi kalau kalian menggunakan mata batin, eh maksudnya yang jeli keliatan kok warna abu - abu nya, serius ga boong :p
Ini yang terakhir paling Om bewok suka yaitu
5.CONTEXTUAL CLASS
Ini adalah merubah warna background tiap baris, dan caranya hanya memanggil class tersebut. ada 4 class yaitu :
.active = Applies the hover color to a particular row or cell
.success = Indicates a successful or positive action
.info = Indicates a neutral informative change or action
.warning = Indicates a warning that might need attention
.danger = Indicates a dangerous or potentially negative action
Kita coba berbarengan semua yaaaa.
Codinganya seperti biasa, ada di atassss eh maksudnya di bawahhhhhhhhh!!!
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr class="active">
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr class="success">
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr class="info">
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr class="warning">
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr class="danger">
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Hasinya bisa lihat dibawah ya.
 |
| Gambar 5 Tampilan Table Dengan Style Bootstrap |
Om bewok mau nanya, kalau semua yang udah dikasih tau om bewok semua bisa di gabungin ga om ? -jawaban singkat, padat dan jelas-YABaca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Table</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<table class="table table-hover table-bordered">
<tr>
<td>Nama</td>
<td>Kelas</td>
<td>Alamat</td>
</tr>
<tr class="active">
<td>Gerald</td>
<td>XII TKJ 1</td>
<td>Bekasi</td>
</tr>
<tr class="success">
<td>Pradina</td>
<td>XII IPS 1</td>
<td>Jakarta</td>
</tr>
<tr class="info">
<td>Ridwan</td>
<td>XI AK 1</td>
<td>Jember</td>
</tr>
<tr class="warning">
<td>Sheila</td>
<td>XII AP 3</td>
<td>New York</td>
</tr>
<tr class="danger">
<td>Bang Joe</td>
<td>2 SD</td>
<td>Bulak Jawa</td>
</tr>
</table>
</body>
</html>
Hasilnya cek sendiri aja, om bewok mau lihat kalian coba praktekan sendiri juga ga di rumah ? hehe.
Jadi langsung tambahin aja seperti contoh codingan yang terakhir ini, perhatikan saja bagian table class nya ada 4 class yang di panggil sama om yaitu
- table ini default boostrap
- table-hover ini jika di sentuh table nya maka berubah backgroundnya
- table-bordered ini akan menjadi kotak - kotak
- class pada tr yaitu contextual classes
Hasilnya yang tadi ya, soalnya tadi om bewok cuman bercanda, nih om kasih, bentuk nya gif jadi biar keliatan apa perubahanya.
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
 |
| Gambar Gif Table Jika Semua Class Di Gabungkan |
Itu saja tutorial kali ini dalam membuat table menggunakan boostrap, jika kalian ingin melihat tutorial bootstrap yang lainya, kalian bisa lihat tutorial series nya, tutorial ini juga termasuk tutorial series juga, jadi biar teman - teman tahu tahapan belajar boostrap seperti apa. http://www.bewoksatukosong.com/2016/06/tutorial-bootstrap-series-dasar-sampai.html
No comments:
Post a Comment