Cara Membuat Tabel Dengan Bootstrap

Assalamu'alaikum Wr.Wb
Salam Dan Bahagia

Pendahuluan
       Pada kali ini saya akan membagikan sedikit tutorial yaitu bagaimana sih cara membuat Tabel di Bootstarp, nah langsung saja dibaca dan dipahami serta dipraktikkan.

Latar Belakang
       Latar Belakang saya dalam membuat tabel dibootsrap ini adalah, masih banyak beberapa yang belum mnegerti tentang apa saja sih tabel yang tersedia di bootsrtrap dan bagaimana cara membuatnya.

Maksud dan Tujuan
       Agar mengerti tentang apa saja sih Tabel yang ada di Bootstrap dan mengerti cara membuatnya.

Jangka Waktu Yang Dibutuhkan
       40 Menit.

Alat Dan Bahan
       Laptop.
       Teks Editor.

Pembahasan/langkah Kerja
       Untuk membuat tabel di dalam bootstrap caranya sangat mudah, kita hanya perlu memasukkan class-class yang telah disediakan oleh bootstrap. Adapu beberapa class bootstrap yang digunakan untuk membuat table sebegai berikut :

• table
• table-striped
• table-bordered
• table-hover

Oke akan saya jelaskan satu persatu :

-fungsi dari class "table" ini adalah digunakan untuk membuat tabel standar/tabel biasa.

-Fungsi dari class "table-striped" ini adalah table-striped merupakan class tambahan untuk membuat tabel dengan menggunakan bootstrap. Class ini berfungsi untuk membuat baris tabel yang memiliki tampilan seperti zebra.

-fungsi dari class 'table-bordered' ini adalah table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.

-fungsi dari class "table-hover" ini adalah table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.

Oke langsung saja akan saya contohkan pembuatan tabel dalam bootstrap

dalam pembuatan tabel semua sama akan tetapi yang membedakan hanya Class dari table nya saja, nah disini saya akan mencotohkan pembuatan tabel dari class Table-striped dan table-bordered

Berikut tampilan dari table striped :

Dan Berikut SourceCodenya :

Dan Berikut Merupakan Tampilan dari class table-bordered :

Berikut SourceCodenya :

Nah gimana? Mudah bukan.

      Dengan adanya Bootstrap Ini jika kita ingin membuat tabel sangatlah mudah, akan tetapi sebelumnya kita harus tau apa saja class-class tabel yang ada di bootstrap.

Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa sekian dan terima kasih.

Wassalamu'alaikum Wr.Wb