Cara Membuat Tabel Bootstrap Kedalam Artikel Blogspot

Tabel biasa digunakan untuk menampilkan data terstruktur namun disajikan secara sistematis. Penyajian data seperti ini memberikan kemudahan bagi pembaca untuk mendapatkan informasi secara mudah. Sehingga data yang terlihat beragam pun mudah dipahami bagi siapapun yang melihatnya.

Oleh karena itu, Bootstrap tidak meninggalkan penggunaan elemen ini. Sebagaimana terlihat dalam dokumentasi resminya, elemen <table> dibahas dengan beragam varian. Ada yang berupa table dasar tampilan biasa. Ada juga yang dengan penambahan class: hover, bordered, warna dan lainnya.

Dan berikut ini akan kami contohkan tata cara penggunaan <table> ke dalam postingan blog. Seperti apakah tampilan tabel jika kita menggunakan library Bootstrap? Silahkan simak sampai tuntas bahasan kali ini tentang cara membuat tabel Bootstrap kedalam artikel Blogger.

Cara Membuat Tabel Bootstrap Kedalam Artikel Blogspot


Cara Membuat Tabel Bootstrap Kedalam Artikel Blogspot

Untuk membuat tabel dengan library Bootstrap sebetulnya tidak jauh berbeda dengan cara yang lainnya. Hanya saja, versi ini jauh lebih mudah - menurut saya pribadi - karena sekalian memanfaatkan Bootstrap dalam segala hal dan tidak hanya sekedar untuk membuat grid sebuah theme blogger.

Bagi teman-teman yang tertarik untuk mencobanya, di bawah ini kami tunjukan langkah-langkah membuat tabel dalam sebuah postingan blogger dengan menggunakan library Boostrap.

1. Login ke dashboard Blogger.

2. Pilih satu blog yang ingin dibuatkan sebuah tabel dalam postingannya jika Anda memiliki banyak blog dalam satu akun.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Catatan bagi teman-teman yang belum menggunakan theme blogger berbasis Bootstrap. Masukan link CDN yang mengarah ke CSS Bootstrap versi terbaru, misalnya kode di bawah ini yang diletakan setelah tag <head> dan sebelum tag penutup </head> dan <b:skin><![CDATA[.

7. Letakan link berikut yang mengarah ke JavaScript bawaan Bootstrap server CDN; jsdelivr atau penyedia CDN Bootstrap lainnya. Kode di bawah ini diletakan sebelum tag penutup </body>.

8. Simpan template.

9. Catatan bagi teman-teman yang sudah menggunakan theme blogger berdasarkan Bootstrap; Sebardi Blog adalah salah satu contohnya. Silahkan langsung buat sebuah postingan dan beri judulnya.

10. Ketik artikelnya.

11. Klik icon pena kemudian pilih mode "Tampilan HTML".

12. Sisipkan baris kode yang menghasilkan tabel berikut ini. Perhatian! Penggunaan class="table" saja sebenarnya sudah cukup untuk membuat tabel. Namun pada contoh di bawah ini dengan menambahkan class "table-striped". Jika diterjemahkan secara bebas striped artinya bergaris atau belang blentong seperti zebra kalau dalam bahasa Dermayu (Indramayu). Jika ingin menambahkan dengan class yang lain silahkan merujuk pada dokumentasi sebagaimana sudah disebutkan di awal.

13. Klik "Publikasikan".

14. Hasilnya akan terlihat seperti pada tangkapan layar berikut:


Kesimpulan

Hari ini kita sudah berhasil membuat tabel pada postingan blog dengan memanfaatkan library Bootstrap. Pada baris kode tersebut mungkin ada beberapa sintaks yang terasa asing bagi sebagian orang. Misalnya ada tag yang seperti ini: <tr>, <td> atau <thead>.

Untuk memudahkan pemahaman, sebetulnya tag tersebut bisa dibaca dan bisa dibayangkan hasil akhirnya. Syaratnya, teman-teman mengetahui "r" itu singkatan dari row (baris), head (kepala), t (tabel) dan d (data) yang merupakan isi dari kolom pada tabel.

Sehingga, untuk menambahkan lebih banyak baris atau kolom ke dalam tabel, cukup duplikasi baris  dan kolom dalam kode HTML tersebut kemudian ubah isinya. Dalam hal ini, khusus untuk edit data bisa dilakukan pada mode "Compose" atau "Tampilan Menulis".

Sekian artikel kali ini tentang cara membuat tabel pada postingan blog dengan memanfaatkan library dari Bootstrap. Anda dapat menambahkan class lainnya untuk mengubah tampilan tabel, seperti warna latar belakang, warna teks, dan sebagainya.

Selamat mencoba.

Baca Juga

Tidak ada komentar:

Posting Komentar