Cara Membuat Tabel Di Blogger

Saya masih ingat dulu kalau membuat tabel di Blogger biasanya melorot ke bawah pas di save, tapi sekarang sudah tidak lagi. Kita bisa membuat table tanpa harus menambahkan code lain selain code tabel. Sudah beberapa kali membuat tabel kadang-kadang masih lupa juga, makanya saya membuat  postingan ini untuk contekan saat membuat tabel setelah sebelumnya membuat postingan tentang contest seo bank mandiri.

Tabel sangat berguna saat membuat list atau kolom-kolom data sehingga tampilan data kita akan lebih bagus dan mudah dibaca oleh pengunjung blog. Misalnya anda ingin membuat blog yang berisi list harga dan nama produk karena anda punya toko di Tokobagus dan ingin promosi di blog menggunakan tabel harga.

Cara membuat tabel sederhana di Blogger

Sekarang kita membuat tabel sederhana untuk memahami struktur tabel secara umum. Tabel sederhana bentuknya seperti ini:

A baris 1 kolom 1	C baris 1 kolom 2
B baris 2 kolom 1	D baris 2 kolom 2

Code tabel di atas adalah seperti yang dibawah ini:

<table border="2">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

Nah untuk lebih memahami code diatas berikut penjelasannya:
tr = untuk membuat baris
td = untuk membuat kolom

Jika masih bingung dengan mana baris dan mana kolom coba perhatikan tabel diatas baris itu horisontal sedangkan kolom itu vertikal. Pada tabel diatas kotak A merupakan baris pertama kolom pertama sedangkan C adalah baris pertama kolom kedua.

Berkreasi dengan tabel di Blogger

Selain tabel sederhana kita juga bisa berkreasi sesuai dengan keinginan. Kita bisa mengatur warna latar, warna huruf, lebar tabel dan lain-lain. Contoh kreasinya seperti dibawah ini:

<table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0" style="background-color: #e0ecf8; border-collapse: collapse; width: 80%;">
<tbody>
<tr>
<td style="text-align: center;>tabel</td>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
</tr>
<tr>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
</tr>
</tbody></table>

Hasilnya akan seperti dibawah ini:

tabel cell	tabel cell	tabel cell
tabel cell	tabel cell	tabel cell

Berikut penjelasan code diatas:
Cellpadding = Jarak antara tulisan dengan border atau dinding cell
Cellspacing =  Jarak antar cell atau jarak antar kolom satu dengan kolom lainnya
Boder-collapse =  Menjadikan boder hanya satu garis tidak seperti pada tabel paling atas

Cobalah kreasi anda sendiri dengan mengubah warna latar atau warna border. Anda bisa menyesuaikan warna dengan warna template anda sehingga tampilannya lebih menarik. Selain membuat code sendiri anda juga bisa mendapatkan code dengan tabel generator. Anda bisa membuatnya disini.