Membuat Table Dengan Menggunakan Class Di Bootstrap
Di panduan kali ini kamu akan belajar bagaimana cara merancang table dengan menggunakan class di bootstrap .
Hallo kembali lagi di artikel panduan Source Code Aplikasi , kali ini saya akan membahas mengenai bootstrap yaitu mengenai bagaimana cara merancang table dengan menggunakan class di bootstrap .
Pada bootstrap terdapat beberapa format (style) table yang dapat Kamu pergunakan sesuai dengan kebutuhan dan selera Kamu. Cara merancang table dengan format yang berbeda lumayan dengan mengganti nama class sesuai dengan format table yang diinginkan
Contoh-contoh class yang dapat di gunakan pada perancangan table di bootstrap yaitu selaku berikut:
Class .table adalah sebuah class yang sangat mendasar pada perancangan tabel di bootstrap. ada beberapa jenis class lain yang dapat Kamu gunakan diantaranya:
.table-striped Bagi merancang tabel dengan gaya Zebra
.table-bordered Bagi merancang tabel dengan border di pinggir table
.table-hover Bagi merancang tabel dengan efek hove
seketika saja saya akan memberikan contoh penggunaanya :
<html lang=en>
<head>
<title>Bootstrap Example</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>
<script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>
</head>
<body>
<div class=container>
<h3>Basic Perancangan Tabel di Bootstrap</h3>
<p>Ini yaitu Table bootstrap dengan menggunakan class .table Silahkan Kamu coba dengan nama class lain bagi memperoleh style yang diinginkan:</p>
<table width=1000px class=table-bordered>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
setelah di jalankan karenanya haislnya akan seperti demo berikut :
tinggal kalian ganti-ganti saja classnya sesuai yang di inginkan, oke itu saja dari saya bagi panduan cara merancang table dengan menggunakan class di bootstrap. Hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
