Bootstrap 4 :: Percantik Tampilan Table dengan Bootstrap 4

Bootstrap 4 :: Percantik Tampilan Table dengan Bootstrap 4
17 May 2019 6 Comments pemrograman2 Site Default

Setelah membuat table tentu kita ingin mempercantiknya agar terlihat bagus dan profesional. Salah satu1 cara mempercantik table adalah dengan menggunakan Bootsrtap4 dapat di diwnload disini

Bootstrap 4 adalah versi terbaru dari Bootstrap; dengan komponen baru, stylesheet yang lebih cepat dan lebih responsif. Bootstrap 4 mendukung rilis terbaru dan stabil dari semua browser dan platform utama. Namun, Internet Explorer 9 dan ke bawah tidak didukung.

Langkah pertama yang harus kita lakukan adalah dengan bukak view table kita dan masukkan link bootsrap di dalam head tepatnya di bawah <title> kita seperti dibawah

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Bootstrap 4 Basic Table

Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal.Class .table menambahkan gaya dasar ke sebuah tabel:

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Striped Rows

Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal. Class .table menambahkan gaya dasar ke sebuah tabel:

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Bordered Table

Class .table-bounded menambahkan batas di semua sisi tabel dan sel:

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Selanjutnya masih ada beberapa class lagi yaitu :

  1. Class .table-hover menambahkan efek hover (warna latar abu-abu) pada baris tabel:
  2. Class .table-dark menambahkan latar belakang hitam ke tabel:
  3. Gabungkan .table-dark dan .table-striped untuk membuat tabel gelap, bergaris:
  4. Class.table-hover menambahkan efek hover (warna latar abu-abu) pada baris tabel:
  5. Class .table-borderless menghapus batas dari tabel:

Penggabungan dua nama clas dilakukan dengan cara beikut :

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
       </tbody>
  </table>

selanjunya mari kita coba mengenal class table pada bootstrap, ada beberapa class yang untuk table yaitu :

ClassDescription
.table-primary Biru: Menunjukkan tindakan penting
.table-successHijau: Menunjukkan tindakan yang berhasil atau positif
.table-dangerMerah: Menunjukkan tindakan berbahaya atau berpotensi negatif
.table-infoLight blue: Indicates a neutral informative change or action
.table-warningBiru muda: Menunjukkan perubahan atau tindakan informatif yang netral
.table-activeAbu-abu: Menerapkan warna hover ke baris tabel atau sel tabel
.table-secondaryAbu-abu: Menunjukkan tindakan yang sedikit kurang penting
.table-lightTabel abu-abu terang atau latar belakang baris tabel
.table-darkTabel abu-abu gelap atau latar belakang baris tabel

Untuk cara penggunaannya sendiri, kita tambahkan clas pada <table> seperti pada contoh berikut

  <table class="table table-striped">
About The Author
Leave Comment
  1. 1

    writing a college essay

    writing essay help https://essayghostwriter.com/

  2. 1
  3. 1

    persuasive writing essays

    writing a biography essay https://essaytag.com/

  4. 1

    write essay online

    writing cause and effect essay https://essaypoints.com/

  5. 1

    writing narrative essays

    essays about writing https://online2casino.com/

  6. 1

    online essay writing service

    writing a college application essay https://onlinecasinos4me.com/