Skip to main content

Belajar membuat table dengan style bootstrap

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.


bootstrap-table-style.png


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

Popular posts from this blog

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...

Youtube Tips 2017 | Cara Mengganti Dark Theme

Pada kesempatan ini saya ingin membahas seputar layout youtube terbaru tahun 2017. Yaitu mengenai cara mengganti tema atau theme baru yang bisa kita temui pada saat kita membuka situs youtube. Mungkin fitur baru ini sengaja disediakan oleh google agar kita tidak jenuh atau bosan dengan tampilan youtube yang itu-itu saja. Fitur ini bisa anda aktifkan dan non aktifkan sesuai dengan selera anda kapan pun anda mau. Kalau menurut saya sih cukup keren. Makanya ketika saya tahu kalau mereka menyediakan fitur tersebut, saya langsung tertarik untuk mencobanya. Dan kesan yang saya dapatkan cukup memuaskan. Karena pada dasarnya saya sebagai developer atau programmer memang sudah terbiasa dengan layout bertema gelap seperti itu. Untuk melihat coding-coding php, vb, dan lain-lain lebih mudah untuk membedakan syntax yang satu dengan syntax yang lainnya. Nah jika anda tertarik untuk mencoba dark theme baru tersebut, kalian bisa langsung menggantinya melalui menu setting. Disana akan ada opsi untuk me...

Belajar PHP Itu Menyenangkan (Memahami Syntax Dasar PHP)

Ngga tahu kenapa saya lagi bersemangat sekali nulis artikel tentang php. Padahal sudah malam nih. Sudah jam 22:40. Waktunya tidur karena besok mesti kerja lagi dan ngga boleh kesiangan pula tuk bangun sholat subuh. Mungkin karena saya merasa kalau saya punya hutang kepada sobat yadishare semua bahwa selama ini saya jarang sekali nulis tentang php. Lebih banyak nulis dan bikin video tentang delphi, visual basic, odoo, photoshop, cara bikin video, grafik, database dan lain-lain. Nah berhubung lagi ada kesempatan dan masih diberikan kesehatan sama yang maha kuasa, jadi saya mau cicil saja sharing tentang php nya dari hal-hal yang sangat sederhana sekali ya. Karena untuk memahami materi bahasa pemrograman tertentu terkadang memang tidak mudah. Termasuk mengenai php. Apalagi untuk menguasai banyak bahasa pemrograman pasti tidak akan mudah. Butuh keseriusan dari diri kita masing-masing. Ibaratnya dulu kalau sekolah kita mungkin suka malas belajar matematika, fisika, kimia, dan lain-lain. Ket...