Hai semuanya!

Ini adalah website lama kami, pada akhir agustus 2020 website ini akan di ahlikan ke https://sekolahprogram. Website yang baru Anda bisa diskusi, membuat artikel dan membagikan karya aplikasi mu.


New Sekolah Program

Bootstrap 4 – Table

Febri Hidayan Komentar

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.

#UsernameEmailCity
1febrihidayanfebri_hidayan@outlook.co.idPekanbaru
2febrihidayanfebri_hidayan@outlook.co.idPekanbaru
3febrihidayanfebri_hidayan@outlook.co.idPekanbaru
Kode Table - Bootstrap 4
<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.
Category Bootstrap


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *