Membuat Tabel Bervariasi warna Dengan Bootstrap
Maret 14, 2017Assalamualaikum Wr.Wb
Pada postingan ini saya akan melanjutkan tutorial menggunakan Botstrap yaitu membuat tabel bervariasi warna,seperti apa?mari kita mulai
- Tuliskan tag wajib di bawah ini jika ingin menggunakan bootstrap dan bagi yang belum punya silahkan download dulu
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- Lalu tinggal kita buat tabelnya
<div class="container">
<h2>Ini contoh tabel berwarna dengan bootstrap</h2>
<p>Ada beberapa style tabel yang telah di sediakan dalam bootstrap yaitu: .defaulf(tabel background putih) .success(tabel background hijau) ,info(tabel background biru muda) , danger(tabel background merah)warning(tabel bakcground kuning) dan active(tabel background abu-abu)</p>
<table class="table">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>crus</td>
<td>Def</td>
<td>email@mereka.com</td>
</tr>
<tr class="success">
<td>cres</td>
<td>john</td>
<td>email@mereka.com</td>
</tr>
<tr class="danger">
<td>cros</td>
<td>Moe</td>
<td>email@mereka.com</td>
</tr>
<tr class="info">
<td>cris</td>
<td>Dooley</td>
<td>email@mereka.com</td>
</tr>
<tr class="warning">
<td>crus</td>
<td>Refs</td>
<td>email@mereka.com</td>
</tr>
<tr class="active">
<td>cras</td>
<td>veson</td>
<td>email@mereka.com</td>
</tr>
</tbody>
</table>
</div>
Dan ini hasil tabel yang kita buat
Yang masih kurang jelas silahkan lihat ss coding di bawah
Oke sekian dulu postingan kali ini semoga bermanfaat di balik banyaknya kekurangan,sekian.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 comments