Table Bootstrap responsive untuk listing data

0
Table Bootstrap responsive untuk listing data

Table HTML adalah elemen yang paling banyak digunakan dalam website. Pada dasarnya, table HTML digunakan untuk menyajikan data dalam baris dan kolom pada halaman web. Alasan untuk membuat table yang responsive adalah untuk pengalaman pengguna yang lebih baik. Jika aplikasi website kamu menggunakan Bootstrap, kamu dapat dengan mudah membuat desain table dalam satu menit. Selain itu, kamu bisa membuat table Bootstrap responsive dengan menambahkan satu Class.

Berbagai jenis contoh table berikut membantu kamu membuat table horizontal dengan styling dasar menggunakan Bootstrap.

Library Bootstrap dan jQuery perlu disertakan untuk menggunakan framework Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Table Bootstrap responsive (Dasar)

Gunakan class table untuk menambahkan style dasar ke table HTML. Class table-responsive akan membuat table responsive.

<table class="table table-responsive">
    <thead>
        <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bagus</td>
            <td>Susilo</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Danang</td>
            <td>Waras</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Cak</td>
            <td>Lontong</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Table Bootstrap Responsive (Bergaris)

Gunakan class table-striped untuk menambahkan garis-garis pada table HTML.

<table class="table table-striped table-responsive">
      <thead>
          <tr>
              <th>Nama Awal</th>
              <th>Nama Akhir</th>
              <th>Email</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Bagus</td>
              <td>Susilo</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Danang</td>
              <td>Waras</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Cak</td>
              <td>Lontong</td>
              <td>[email protected]</td>
          </tr>
      </tbody>
    </table>

Table Bootstrap Responsive (Hover)

Apa itu Hover? Dalam hal ini Hover maksudnya ketika pointer mouse digerakkan diatas table maka baris table akan berubah warna atau fokus pada baris tersebut. Gunakan class table-hover untuk menambahkan efek Hover pada table HTML.

<table class="table table-hover table-responsive">
      <thead>
          <tr>
              <th>Nama Awal</th>
              <th>Nama Akhir</th>
              <th>Email</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Bagus</td>
              <td>Susilo</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Danang</td>
              <td>Waras</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Cak</td>
              <td>Lontong</td>
              <td>[email protected]</td>
          </tr>
      </tbody>
    </table>

Table Bootstrap Responsive (Bordered)

Gunakan class table-bordered untuk menambahkan Border/garis tepi pada table HTML.

<table class="table table-bordered table-responsive">
      <thead>
          <tr>
              <th>Nama Awal</th>
              <th>Nama Akhir</th>
              <th>Email</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Bagus</td>
              <td>Susilo</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Danang</td>
              <td>Waras</td>
              <td>[email protected]</td>
          </tr>
          <tr>
              <td>Cak</td>
              <td>Lontong</td>
              <td>[email protected]</td>
          </tr>
      </tbody>
    </table>

Gampang kan vroh?

BAGIKAN
Subscribe
Beritahu
guest
0 Comments
Inline Feedbacks
View all comments