Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Friday 31 March 2017

Belajar Bootstrap Part 2 Membuat Tabel dengan Bootstrap

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.
dan untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data.
  • .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.



Referensi

http://www.w3schools.com

www.malasngoding.com

No comments:

Post a Comment

Adbox