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:
| Buah | Sayur | Protein | Karbohidrat |
|---|---|---|---|
| Jeruk | Brokoli | Ayam | Beras |
| Apel | Bayam | Sapi | Jagung |
| Pisang | Sawi | Ikan | Kentang |
| Salak | Kangkung | Telur | Ketela |
Untuk membuat kotak tabel, ubah elemen <table> ke <table border="1"> dan hasilnya:
| Buah | Sayur | Protein | Karbohidrat |
|---|---|---|---|
| Jeruk | Brokoli | Ayam | Beras |
| Apel | Bayam | Sapi | Jagung |
| Pisang | Sawi | Ikan | Kentang |
| Salak | Kangkung | Telur | Ketela |
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| Buah | Sayur |
|---|---|
| Jeruk | Brokoli |
| Apel | Bayam |
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| Buah | Sayur | Protein | Karbohidrat |
|---|---|---|---|
| Jeruk | Brokoli | Ayam | Beras |
| Apel | Bayam | Sapi | Jagung |
| Pisang | Sawi | Ikan | Kentang |
| Salak | Kangkung | Telur | Ketela |
Untuk border bawah, lebar 100% halaman, copy paste CSS berikut sebelum ]]></b:skin>
th, td {border-bottom: 1px solid #ddd;}| Buah | Sayur |
|---|---|
| Jeruk | Brokoli |
| Apel | Bayam |
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">| Buah | Sayur | Protein | Karbohidrat |
|---|---|---|---|
| Jeruk | Brokoli | Ayam | Beras |
| Apel | Bayam | Sapi | Jagung |
| Pisang | Sawi | Ikan | Kentang |
| Salak | Kangkung | Telur | Ketela |
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">| Buah | Sayur | Protein | Karbohidrat |
|---|---|---|---|
| Jeruk | Brokoli | Ayam | Beras |
| Apel | Bayam | Sapi | Jagung |
| Pisang | Sawi | Ikan | Kentang |
| Salak | Kangkung | Telur | Ketela |
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 :
| Sumatera | Jawa | Bali | Kalimantan | Sulawesi | Papua | Lombok | Bangka | Madura | Belitung | Timor |
|---|---|---|---|---|---|---|---|---|---|---|
| Medan | Semarang | Denpasar | Balikpapan | Makassar | Jayapura | Mataram | Pangkalpinang | Pamekasan | Pangkalpinang | Kupang |
| Palembang | Cilacap | Ubud | Samarinda | Palu | Merauke | Tanjung | Sungailiat | Sumenep | Gantung | Atambua |
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.
Label: Blogger, Inspirasi, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
