Bootstrap 4 – Table

Suatu data yang telah kita input , maka kita harus tampilkan datanya sebagai hasil yang telah di inputkan. Ada beberapa class yang saya gunakan untuk membuat tampilan table yang indah dan responsive. Kalau gitu kita bisa lihat hasil yang telah dibuat sebelumnya.

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead class="bg-info">
      <tr>
        <th>#</th>
        <th>Username</th>
        <th>Email</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>febrihidayan</td>
        <td>febri_hidayan@outlook.co.id</td>
        <td>Pekanbaru</td>
      </tr>
      <tr>
        <td>2</td>
        <td>febrihidayan</td>
        <td>febri_hidayan@outlook.co.id</td>
        <td>Pekanbaru</td>
      </tr>
      <tr>
        <td>3</td>
        <td>febrihidayan</td>
        <td>febri_hidayan@outlook.co.id</td>
        <td>Pekanbaru</td>
      </tr>
    </tbody>
  </table>
</div>

Pada class diatas kita awali dengan class table-responsive dan di ikuti dengan class lainnya. Sebagai penjelasannya bisa simak dibawah ini dengan baik.

• Table-responsive digunakan apabila tampilan kita sudah banyak kolomnya maka tampilan bisa digeser ke kiri atau sebaliknya. Ada juga table-responsive-sm dimana pada posisi browser di bawah 767px maka table responsive akan terjadi.
• Table merupakan panggilan utama sebagai penggunakan tag <table>
• Table-striped sebagai tampilan baris, dimana setiap baris warna akan berbeda putih dan abu-abu.
• Table-bordered dari nama kita bisa menebak yaitu sebagai pembatas garis sisi dari sisi lainnya.
• Table-hover apa bila cursor saat diatas table tertentu maka akan terjadi penanda baris.