Blogger, Tutorial

Blogger : Cara Membuat Tabel

Dalam membuat sebuah tulisan kadang kita membutuhkan pengetahuan tentang bagaimana cara membuat tabel di Blogger Post (Blogspot). Meski bisa dikatakan bahwa kebutuhan itu cukup jarang diperlukan, namun tetap penting untuk diketahui agar tulisan bisa diterbitkan dan orang bisa lebih mudah untuk membacanya.

Di Blogger sendiri tidak ada menu yang bisa digunakan pengguna untuk membuat table, baik itu di "Compose" maupun di "HTML", sehingga membuat tabel di Blogger harus dilakukan secara manual. Saya sendiri tidak pernah menggunakan pilihan 'Compose" dan selalu menggunakan pilihan 'HTML' oleh karena bisa sepenuhnya mengendalikan apa yang saya tulis, dan lebih menghemat perintah yang tak perlu.

Jika memiliki tulisan di WordPress dan hendak memindahkannya ke Blogger, maka umumnya bisa dilakukan tanpa melakukan perubahan apa pun. Kecuali jika sudah mendekorasinya dengan CSS yang tidak dilakukan langsung di tabel, maka kode CSS-nya perlu dibuat lagi di theme Blogger.

Elemen dasar untuk membuat tabel adalah <table></table> tag yang digunakan untuk mendefinisikan tabel, <tbody></tbody> tag yang digunakan untuk mengelompokkan konten tubuh dalam tabel HTML, <th></th> digunakan pada table column header atau judul kolom tabel , <tr></tr> dipakai untuk menambahkan baris pada tabel, dan <td></td> untuk menambahkan dan mengatur kolom dalam tabel.

Blok dasar untuk membuat tabel di Blogger Post adalah sebagai berikut, misalnya untuk tabel 4x4:
<table><tbody>
<th></th> <th></th> <th></th> <th></th>
<tr><td></td> <td></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> <td></td> <td></td> </tr>
</tbody></table>


Jika diisi dengan data hasilnya adalah sebagai berikut:
BuahSayurProteinKarbohidrat
JerukBrokoliAyamBeras
ApelBayamSapiJagung
PisangSawiIkanKentang
SalakKangkungTelurKetela

Untuk membuat kotak tabel, ubah elemen <table> ke <table border="1"> dan hasilnya:
BuahSayurProteinKarbohidrat
JerukBrokoliAyamBeras
ApelBayamSapiJagung
PisangSawiIkanKentang
SalakKangkungTelurKetela

Untuk border tunggal dan padding sel tabel, Login ke Blogger --> Themes --> Edit HTML, copy paste CSS berikut sebelum ]]></b:skin>
table {border-collapse: collapse;}
table, th, td {border: 1px solid black;padding:3px;}
, hasilnya
BuahSayur
JerukBrokoli
ApelBayam

Untuk border tunggal di sekeliling tabel, lebar 100% halaman dengan padding, ubah elemen <table> ke <table style="border: 1px solid black;padding:3px;width:100%;> atau copy paste CSS berikut sebelum ]]></b:skin>
table {border: 1px solid black;padding:3px;width:100%;}, hasilnya
BuahSayurProteinKarbohidrat
JerukBrokoliAyamBeras
ApelBayamSapiJagung
PisangSawiIkanKentang
SalakKangkungTelurKetela

Untuk border bawah, lebar 100% halaman, copy paste CSS berikut sebelum ]]></b:skin>
th, td {border-bottom: 1px solid #ddd;}
BuahSayur
JerukBrokoli
ApelBayam

CSS lainnya yang bisa digunakan untuk elemen <th> dan <td> adalah sebagai berikut:
th {text-align: center;height: 50px;vertical-align: top;padding: 5px;background-color: #555;color: #fff;}

Pilihan untuk text-align adalah left, center dan right; pilihan untuk vertical-align adalah top, middle dan bottom; padding dipakai untuk mengatur jarak di sekeliling sel; background-color untuk mengatur warna sel; dan color untuk mengatur warna teks di dalam sel tabel.

CSS lainnya yang bisa digunakan untuk elemen <tr> adalah:
tr:hover {background-color: #f5f5f5;} dipakai untuk merubah warna baris ketika mouse berada di atasnya. Copy CSS di bawah ini dan paste sebelum ]]></b:skin>.
.tablehover {width: 100%;border-collapse: collapse;}
.tablehover th,
.tablehover td {padding: 3px;text-align: left;border-bottom: 1px solid #ddd;}
.tablehover tr:hover {background-color: #f5f5f5}


Pada tulisan gunakan <table class="tablehover">
BuahSayurProteinKarbohidrat
JerukBrokoliAyamBeras
ApelBayamSapiJagung
PisangSawiIkanKentang
SalakKangkungTelurKetela

Sedangkan CSS tr:nth-child(even) {background-color: #f2f2f2;} dipakai untuk memberi warna selang seling pada baris table, dengan pilihan nth-child(even) untuk baris genap, atau nth-child(odd) untuk baris ganjil. Copy CSS di bawah ini dan paste sebelum ]]></b:skin>.
.tablezebra {width: 100%;border-collapse: collapse;}
.tablezebra td {padding: 3px;text-align: left;border-bottom: 1px solid #ddd;}
.tablezebra tr:nth-child(even) {background-color: #f2f2f2;}


Pada tulisan gunakan <table class="tablezebra">
BuahSayurProteinKarbohidrat
JerukBrokoliAyamBeras
ApelBayamSapiJagung
PisangSawiIkanKentang
SalakKangkungTelurKetela

Jika jumlah kolom tabel banyak, agar tabel tak keluar dari bidang tulisan ketika dibaca, terutama dengan menggunakan mobile atau smart-phone, bungkus tabel dengan elemen <div style="overflow-x:auto;"></div>

<div style="overflow-x:auto;white-space: nowrap;padding-bottom:10px;"><table><tbody>
<th></th> <th></th> <th></th>
<tr><td></td> <td></td> <td></td></tr>
<tr><td></td> <td></td> <td></td></tr>
</tbody></table></div>


Contohnya adalah seperti di bawah ini, yang memberikan tanda slider di bawah tabel :
SumateraJawaBaliKalimantanSulawesiPapuaLombokBangkaMaduraBelitungTimor
MedanSemarangDenpasarBalikpapanMakassarJayapuraMataramPangkalpinangPamekasanPangkalpinangKupang
PalembangCilacapUbudSamarindaPaluMeraukeTanjungSungailiatSumenepGantungAtambua

Perhatikan bahwa jumlah pasangan elemen <th></th> harus sama dengan jumlah pasangan elemen <td></td>. Demikian cara membuat tabel di Blogger post dengan tag dan elemen untuk mendekorasinya sesuai selera. Semoga bermanfaat.


Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Mei 28, 2018.