Membuat Tabel Bervariasi warna Dengan Bootstrap

Assalamualaikum 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