Home / Bootstrap / Bootstrap Table

Bootstrap Table


Cara membuat table menggunakan bootstrap

Pada tutorial kali ini kita membahas bootstrap table. Tabel digunakan saat kita ingin menampilkan data dalam bentuk kolom dan baris. 

Bootstrap telah membuat class – class untuk mengatur dalam pemuatan tabel. Hanya dengan menambahkan class “table”, Pengaturan tabel di Bootstrap sudah digunakan.

Elemen-elemen yang didukung dalam pembuatan table bootstrap

Adapun elemen HTML yang didukung Bootstrap dalam pembuatan table adalah sebagai berikut :
<table> Elemen dasar untuk menampilkan data dalam format tabel.
<thead> Elemen wadah untuk baris header tabel (<tr>) ke kolom tabel.
<tbody> Elemen wadah untuk baris body tabel (<tr>) ke kolom tabel.
<tr> Elemen wadah untuk satu set sel tabel (<td> atau <th>) yang
muncul pada satu baris.
<td> Tabel dasar sel.
<th> tabel khusus sel untuk kolom (atau baris, tergantung pada ruang lingkup dan
penempatan) label. Harus digunakan dalam <thead>.
<caption> Deskripsi tabel.


Contoh Beberapa class dalam pengaturan table

Berikutini adalah contoh pembuatan table bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form Login</title>

<!-- Bootstrap -->
<link href=" css/bootstrap.min.css " rel=" stylesheet ">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" style="margin-top:40px">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<caption> <h3> Contoh Bootstrap Table </h3> </caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="success">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="warning">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<tr class="danger">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<tr class="info">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Keterangan Class

Berikut ini keterangan dari class-class yang dipakai pada contoh diatas.


class table
Class dasar dalam pembuatan table.

Class table-responsive
Untuk responsive device.

Class table-bordered
Untuk menambahkan border di table.

Class table-striped
Untuk membuat warna bergantian di row table .

Class table-hover
Menberikan penanda sewaktu cursor berada di atas row table.

Class active
Memberikan warna abu-abu di table.

Class success
Memberikan warna hijau di table.

Class warning
Memberikan warna kuning di table.

Class danger
Memberikan warna merah di table.

Class info
Memberikan warna hijau di table.

Semoga bermanfaat, selamat mencoba.
Bootstrap Table Bootstrap Table Reviewed by Admin on 11:15 AM Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.