Belajar Bootstrap Dasar Part 4 : Membuat Tabel dengan Bootstrap
Rabu 9 November 2016
Membuat Tabel Dengan Bootstrap Pada tutorial kali ini saya akan membahas tentang membuat tabel dan mendesign tabel dengan mudah menggunakan bootstrap . untuk membuat tabel dengan bootstrap caranya sangat mudah . Anda perlu memasukan class-class bootstrap yang digunakan untuk mendesign atau membuat tabel adalah sebagai berikut .
- .table Class ini digunakan untuk mendefinisikan atau membuat tabel standar / tabel biasa.
- .tabel-striped merupakan class tambahan untuk membuat tabel dengan menggunakan bootstrap . class ini berfungsi untuk membuat baris tabel yang bergaya belag-beling (strip).
- .table-bordered di gunakan untuk membuat tabel yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table .
- .table-hover digunakan class tambahan untuk mendesign table menggunkan bootstrap . table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakan di atas row table.
dan untuk membuat pewarnanan pada row atau tabel data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row , atau tambahan pada tag <td> untuk memberi warna pada table data .
- .succes digunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data.
- .danger digunakan untuk memberi warna merah pada table row atau table data.
- .info digunakana untuk memberi warna biru pada table row atau table data.
- .warning digunakan untuk memberi warna kuning pada table row atau table data.
Tahap Pembuatan Table Dengan Bootstrap
Untuk membuat atau mendesaign table dengan bootstrap buat sebuah file php atau html. di sini saya membuat file table.php .
table.php
Perhatikan pada contoh diatas , kita hanya perlu menambahkan class "table " pada element tag <table> pembuka . dan hasil tampilan table akan seperti di atas.
Membuat table border dengan Bootstarp
Untuk membuat table brder atau table yang memiliki garis anda . hanya menambahkan class "table_bordered" bersama dengan class "table" contohnya .
Membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table-bordered" pada tag <table> pembuka seperti contoh di atas.
table dengan gaya strip atau belang-belang dapat di buat dengan menggunakan class "table-striped" pada bootstrap
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 .
Membuat table responsive dengan bootstrap
Untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakan element table di dalam elemen <div> yang di beri calss "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 scorol secara otomatis untuk menjaga table tetap utuh . berikut ini adalah contoh Membut table responsive dengan 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/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<table class="table ">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardisk</td>
<td>715.000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>70.000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td>50.000</td>
</tr>
<tr>
<td>4</td>
<td>RAM</td>
<td>500.000</td>
</tr>
<tr>
<td>5</td>
<td>Flashdisk</td>
<td>100.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Perhatikan pada contoh diatas , kita hanya perlu menambahkan class "table " pada element tag <table> pembuka . dan hasil tampilan table akan seperti di atas.
Membuat table border dengan Bootstarp
Untuk membuat table brder atau table yang memiliki garis anda . hanya menambahkan class "table_bordered" bersama dengan class "table" contohnya .
<!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>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardisk</td>
<td>715.000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>70.000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td>50.000</td>
</tr>
<tr>
<td>4</td>
<td>RAM</td>
<td>500.000</td>
</tr>
<tr>
<td>5</td>
<td>Flashdisk</td>
<td>100.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table-bordered" pada tag <table> pembuka seperti contoh di atas.
<table class="table table-bordered">Membuat Table Strip Dengan Bootstrap
table dengan gaya strip atau belang-belang dapat di buat dengan menggunakan class "table-striped" pada bootstrap
<!DOCTYPE html>tambahkan class "table-striped" pada tag <table> pembuka seperti contoh di atas.
<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>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardisk</td>
<td>715.000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>70.000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td>50.000</td>
</tr>
<tr>
<td>4</td>
<td>RAM</td>
<td>500.000</td>
</tr>
<tr>
<td>5</td>
<td>Flashdisk</td>
<td>100.000</td>
</tr>
</tbody>
</table>
</body>
</html>
<table class="table table-bordered table-striped">Lihatlah Perbedaanya.
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 .
<table class="table table-hover">lihat lah script di bawah ini :
<!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>
<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardisk</td>
<td>715.000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>70.000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td>50.000</td>
</tr>
<tr>
<td>4</td>
<td>RAM</td>
<td>500.000</td>
</tr>
<tr>
<td>5</td>
<td>Flashdisk</td>
<td>100.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Membuat table responsive dengan bootstrap
Untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakan element table di dalam elemen <div> yang di beri calss "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 scorol secara otomatis untuk menjaga table tetap utuh . berikut ini adalah contoh Membut table responsive dengan bootstrap.
<!DOCTYPE html>sekian dulu tutorial membuat table dengan bootstrap .anda perlu menambahkan class-class table bootstrap untuk membuat table sesuai keinginan anda
<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>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Barang</th>
<th>Harga</th> </tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardisk</td>
<td>715.000</td>
</tr>
<tr>
<td>2</td>
<td>Keyboard</td>
<td>70.000</td>
</tr>
<tr>
<td>3</td>
<td>Mouse</td>
<td>50.000</td>
</tr>
<tr>
<td>4</td>
<td>RAM</td>
<td>500.000</td>
</tr>
<tr>
<td>5</td>
<td>Flashdisk</td>
<td>100.000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments