Belajar Bootstrap Part 2 Membuat Tabel dengan bootstrap
Assalamualaikum Wr. Wb.
Hai sobat, bertemu lagi dengan saya orang tamvan :D , Pada kesempatan kali ini kita akan belajar tentang bagaimana cara membuat tabel di bootstrap. Langsung saja untuk lebih jelasnya bisa dilihat penjelasan berikut.
PEMBAHASAN
Untuk membuat tabel di dalam bootstrap caranya sangat mudah, kita hanya perlu memasukkan class-class yang telah disediakan oleh bootstrap. Adapu beberapa class bootstrap yang digunakan untuk membuat table sebegai berikut.
- .table
Class ini digunakan untuk membuat tabel standar/tabel biasa.
- .table-striped
table-striped merupakan class tambahan untuk membuat tabel dengan menggunakan bootstrap. Class ini berfungsi untuk membuat baris tabel yang memiliki tampilan seperti zebra.
- .table-bordered
table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.
- .table-hover
table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.
- .success
class ini di gunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data.
- .danger
class ini di gunakan untuk memberi warna merah pada table row atau table data.
- .info
class ini di gunakan untuk memberi warna biru pada table row atau table data.
- .warning
class ini di gunakan untuk memberi warna kuning pada table row atau table data.
LATAR BELAKANG
Ingin belajar lebih dalam tentang class-class yang ada di dalam bootstrap.
MAKSUD & TUJUAN
Memudahkan kita dalam membuat tabel tanpa harus membuat file CSS.
Memudahkan kita mendesain suatu tabel, karena hanya memanggil class-class yang kita inginkan.
ALAT & BAHAN
- Bootstrap
- Text Editor
- Web Browser
LANGKAH KERJA
Untuk membuat tabel dengan bootstrap anda bisa membuatnya dengan php atau html. Langsung saja lihat contoh berikut.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | www.ahmadfaizin.ga</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Masukkan code diatas dan kita lihat hasilnya.
Hasilnya berupa tabel sederhana.
Membuat table border dengan bootstrap
untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class “table_bordered” bersamaan dengan class “table”.Contoh :
<!DOCTYPE html><html><head><title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>< rel="stylesheet" type="text/css" href="css/bootstrap.css">< type="text/jav" src="js/jquery.js"><>< type="text/jav" src="js/bootstrap.js"><></head><body><h1>Cara Membuat table dengan Bootstrap | www.ahmadfaizin.ga</h1><table class="table table-bordered"><thead><tr><th>No</th><th>Makanan</th><th>Harga</th></tr></thead><tbody><tr><td>1</td><td>Bakso</td><td>12.000</td></tr><tr><td>2</td><td>Mie Goreng</td><td>7.000</td></tr><tr><td>3</td><td>Nasi Goreng</td><td>15.000</td></tr><tr><td>4</td><td>Sate Padang</td><td>17.000</td></tr><tr><td>5</td><td>Nasi Soto</td><td>20.000</td></tr></tbody></table></body></html>  |
Hasilnya akan terlihat ada border di tabel tersebut.
Membuat Table strip dengan bootstrap
Table dengan gaya strip atau belang-belang dapat di buat dengan menggunakan class “table-striped” pada bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 2 : Membuat table dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/jav" src="js/jquery.js"></script>
<script type="text/jav" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | www.ahmadfaizin.ga</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Gambar di atas merupakan hasil dari table-striped, yang mana akan terlihat ada efek zebra pada tabel tersebut.
Membuat table hover dengan bootstrap
Seperti pada contoh-contoh membuat table dengan bootstrap di atas, untuk membuat efek hover pada table anda hanya perlu menambahkan class “table-hover” pada tag <table> pembuka.
1
|
<table class="table table-hover">
|
Membuat table responsive dengan bootstrap
Untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakkan element table di dalam element <div> dan memasukkan class “table-responsive”. <div class=’table-responsive’>. Kelebihan dari class table-responsive ini akan membuat table anda tidak akan berantakan walaupun di buka melalui smartphone yang memiliki resolusi layar yang lebih kecil. akan muncul scrol secara otomatis untuk membuat menjaga table tetap utuh. berikut ini adalah contoh membuat table responsive dengan bootstrap.Contoh :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/jav" src="js/jquery.js"></script>
<script type="text/jav" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | www.ahmadfaizin.ga</h1>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Untuk membuktikkan tabel tersebut responsive, anda bisa mengetes dengan membesar kecilkan browser anda.
Mungkin cukup sekian dari saya, kurang lebihnya mohon maaf.
Syukron
Wassalamualaikum Wr. Wb.
No comments:
Post a Comment