Menyambung materi kita sebelumnya yang membahas tentang framework bootstrap, kali ini saya akan mencoba memberikan sedikit contoh bagaimana cara membuat table statis dengan style bootstrap.
Mengapa saya bilang table statis, karena table tersebut hanya berisi content yang sifatnya statis atau tidak berubah-ubah. Apabila anda ingin membuatnya menjadi lebih dinamis, tentu saja anda dapat menghubungkannya ke dalam database MySQL menggunakan php.
Bagi anda yang masih pemula saya sarankan untuk belajar segala sesuatunya dari dasar. Dengan begitu anda akan lebih memahami teknik dan proses pembuatan sebuah aplikasi web dari awal.
Cara membuat table dengan style bootstrap
Buat sebuah file html dengan nama table dan simpan ke dalam folder bootstrap yang pernah kita buat sebelumnya. Ketikkan script html seperti berikut ini ke dalam file table.html dan simpan kembali.
[code language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Belajar mengenal Bootstrap, dari Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Belajar membuat table dengan style bootstrap</h2>
Contoh table yang dibuat dengan menggunakan class table bootstrap.
<table class="table" style="width:600px;">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
Contoh table yang dibuat dengan menggunakan class table-bordered bootstrap.
<table class="table table-bordered" style="width:700px;">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
Contoh table yang dibuat dengan menggunakan class table-bordered table-striped bootstrap.
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
</div>
<!-- /container -->
</body>
</html>
[/code]
Jika sudah selesai, silahkan buka web browser anda dan ketikkan alamat url : http://localhost/bootstrap/table.html. Kira-kira tampilan table nya akan menjadi seperti berikut ini.
Gimana…mudah bukan ? Nantikan artikel-artikel berikutnya mengenai bootstrap di pertemuan selanjutnya. Sampai jumpa.
Silahkan kalau anda mau download materi bootstrap-table disini.
https://www.youtube.com/watch?v=Fkur5wrk0ac
Kalau artikel dan videonya bermanfaat, saya harap kalian mau klik like, share and subscribe channel saya tersebut.
Comments
Post a Comment