Membuat Table Dengan Bootstrap

Membuat Table Dengan Bootstrap

pinyinkpin - kali ini saya akan membahas bagaimana membuat table dalam bootstrap . dalam table bootstrap div class yang di pakai adalah container. sama seperti dalam typography dalam bootstrap, juga menggunakan div class container.untuk script dasar nya yaitu sebagai berikut: - pinyinkpin

<div class="container">

      <table class="class table">

        <thead>

          <tr>

            <th>nama</th>

            <th>alamat</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>pinyink</td>

            <td>jepara</td>

          </tr>

          <tr>

            <td>pinyinkpin</td>

            <td>jepara</td>

          </tr>

        </tbody>

      </table>

    </div>

langsung saja akan saya jelaskan bagaimana Membuat Table Dengan Bootstrap yaitu sebagai berikut:

Membuat Table Dengan Bootstrap dengan class table

dalam Membuat Table Dengan Bootstrap   class yang di pakai adalah table. dari script di atas isikan "table" pada class table, hasilnya akan seperti gambar di bawah

Membuat Table Dengan Bootstrap

Membuat Table Dengan Bootstrap dengan class .table-striped

class .table-striped memberi efek seperti zebra pada setiap baris dalam table . class ini sering di gunakan karena memberi kesan bagus dalam table, cara menggunakan nya sangat mudah cukup tambahkan table-striped dalam class table.

<table class="table table-striped">

 . hasil bisa di lihat di gambar

Membuat Table Dengan Bootstrap

Membuat Table Dengan Bootstrap dengan class table-bordered

dalam class table-bordered ini memberi efek border pada tepi table, dalam menggunakan nya cukup tambah table-bordered dalam class table

<table class="table table-bordered">

untuk hasil bisa di lihat di gambar

Membuat Table Dengan Bootstrap

Membuat Table Dengan Bootstrap dengan class table hover

yang di maksud hover ini sama dengan hover di css , yaitu memberi efek bayangan pada baris kolom yang di lewati mouse, sintaknya yaitu

<table class="table table-hover">

 Membuat Table Dengan Bootstrap dengan contextual class

yaitu dengan membuat setiap baris atau kolom punya class yang berbeda . dalam class ini table class hanya menggunakan table saja, tapi di <tr> menggunakan class, adapun class nya yaitu: active , info , danger, success, warning . contoh di bawah ini adalah script nya 

    <div class="container">

      <table class="table">

        <thead>

          <tr>

            <th>nama</th>

            <th>alamat</th>

          </tr>

        </thead>

        <tbody>

          <tr class="active">

            <td>pinyink</td>

            <td>jepara</td>

          </tr>

          <tr class="success">

            <td>pinyinkpin</td>

            <td>jepara</td>

          </tr>

          <tr class="info">

            <td>pinyink</td>

            <td>jepara</td>

          </tr>

          <tr class="danger">

            <td>pinyinkpin</td>

            <td>jepara</td>

          </tr>

          <tr class="warning">

            <td>pinyink</td>

            <td>jepara</td>

          </tr>

          <tr>

            <td>pinyinkpin</td>

            <td>jepara</td>

          </tr>

        </tbody>

      </table>

    </div>

hasilnya sebagai berikut:

Membuat Table Dengan Bootstrap dengan contextual class

mungkin hanya itu saja yang dapat saya jelaskan dalam posting Membuat Table Dengan Bootstrap , kurang lebihnya saya mohon maaf. salam by pinyinkpin admin pinyinkpin.blogspot.com