Bootstrap 3 Table - Tutorial Bootstrap Indonesia

Tutorial Bootstrap Table

TrikSonic -Tabel HTML digunakan sebagai element yang mewakili Data Tabular, yang berisi informasi data yang terdiri dari kolom dan baris.

Lihat tutorial Tabel HTML untuk mempelajari lebih lanjut tentang tabel.

Dengan bootstrap untuk menampilkan sebuah table sangat mudah untuk dilakukan, efisien, serta memiliki tampilan yang modern.

Default Table

Secara default bootstrap table menggunakan class .table sebagai class dasarnya, yang dituliskan pada element HTML <table>

Contoh :

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>    
  </tbody>
</table>

Striped Table

Untuk menciptakan warna latar yang berbeda secara bergantian pada setiap baris pada table seperti garis zebra, gunakan class .table-striped pada class dasar .table

Catatan : Table Striped diatur melalui CSS selector nth-child, jadi tidak berlaku untuk browser lama, seperti Internet Explorer 8 kebawah.

Contoh :

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Monica</td>
      <td>7 Tahun</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Rossa</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

Bordered table

Untuk menampilkan border pada setiap cell yang ada pada table tambahkan class .table-bordered setelah class dasar .table

Hover rows

Table hover digunakan untuk menambahkan warna latar pada setiap baris table, ketika baris table dilewati oleh pointer mouse atau ketika disentuh pada perangkat none mouse.

Untuk menerapkannya cukup menambahkan class .table-hover pada class dasar .table

Contoh :

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anshari</td>
      <td>5 Tahun</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Nafis</td>
      <td>8 Tahun</td>
    </tr>
  </tbody>
</table>

Table Condensed

Table Condensed digunakan untuk membuat table dengan sedikit ketebalan (padding) pada setiap cell yang ada pada table. Biasanya digunakan pada table yang memerlukan banyak ruang seperti mempunyai banyak konten didalamnya ataupun memiliki banyak cell

Untuk menerapkannya tambahkan class .table-condensed setelah class dasar .table

Contextual class

Beberapa class tambahan yang dapat digunakan, terkait dengan penggunaan table adalah : .active, .success, .info, .warning, .danger

Nama class diatas dapat dituliskan pada element <tr>, <th>, atau <td>

Contoh pada element <tr> :

<table class="table">
  <thead>
    <tr>
      <th>Head</th>
      <th>Head</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="success">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="info">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="warning">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="danger">
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Contoh pada element <th> dan <td> :

<table class="table">
  <thead>
    <tr>
      <th class="warning">Head</th>
      <th class="info">Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">Cell</td>
      <td class="success">Cell</td>
    </tr>
    <tr>
      <td class="success">Cell</td>
      <td class="active">Cell</td>
    </tr>
    <tr>
      <td class="danger">Cell</td>
      <td class="info">Cell</td>
    </tr>
    <tr>
      <td class="warning">Cell</td>
      <td class="danger">Cell</td>
    </tr>
    <tr>
      <td class="info">Cell</td>
      <td class="success">Cell</td>
    </tr>
  </tbody>
</table>

Responsive table

Table Responsive pada bootstrap digunakan untuk mengaktifkan pengguliran secara horizontal.

Pengguliran akan aktif jika konten yang ada pada cell mencapai batas maksimal lebar.

Pengguliran akan aktif dan berlaku pada lebar layar dibawah 768px, dan akan memiliki tampilan seperti biasa jika lebar layar diatas 768px.

Untuk menerapkannya bungkus table dengan element <div> dan berikan nama class .table-responsive

Contoh :

<div class="table-responsive">
  <table class="table">
   ...
  </table>
</div>