Belajar Membuat Tabel di Blogger Menggunakan HTML

Pada kesempatan beberapa waktu sebelumnya saya pernah membahas bagaimana cara membuat tabel di Blogger dengan menggunakan kode HTML dalam posting yang berjudul Cara Membuat Tabel Sederhana di Blogger. Untuk kali ini saya akan kembali mengulas cara membuat tabel di Blogger lebih dalam lagi.

Dalam membuat sebuah tabel, kita memerlukan tag-tag HTML seperti di bawah ini:

• Tag <table>
• Tag <tbody>
• Tag <tr>
• Tag <th>
• Tag <td>

Tag <table> mempunyai fungsi untuk mendefinisikan sebuah tabel. Tag <tbody> menunjukkan isi dari tabel tersebut . Tag <tr> berfungsi untuk mendefinisikan baris tabel. Tag <th> untuk mendefiniskan judul tiap kolom atau baris tabel. Tag <td> untuk mendefinisikan isi setiap kolom.

Tag-tag ini tidak dapat berdiri sendiri dan harus dirangkaikan sedemikian rupa agar dapat membentuk sebuah tabel. Tag-tag ini tentu saja kita letakkan di posisi Edit HTML saat kita membuat posting di Blogger. Contoh:

<table border="1"><tbody>
<tr><th>Kolom 1</th><th>Kolom 2</th><th>Kolom 3</th></tr>
<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>
</tbody></table>

Bila kode HTML tersebut di atas sudah diterbitkan, maka hasilnya akan tampak seperti di bawah ini.

Kolom 1	Kolom 2	Kolom 3
Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Tag <table> memiliki atribut sebagai berikut:

Atribut	Keterangan
align	Menentukan posisi horizontal tabel.
background	Menentukan gambar latar belakang tabel.
bgcolor	Menentukan warna latar belakang tabel.
border	Menentukan ketebalan bingkai tabel.
bordercolor	Menentukan warna bingkai tabel.
bordercolor-light	Menentukan warna depan bingkai tabel.
bordercolor-dark	Menentukan warna "bayangan" bingkai tabel.
cellspacing	Menentukan jarak spasi antarsel
cellpadding	Menentukan jarak isi sel dengan bingkai.
height	Menentukan tinggi tabel.
width	Menentukan lebar tabel.
valign	Menentukan posisi vertikal teks dalam sel.

Sedangkan beberapa atribut untuk tag <td> adalah sebagai berikut:

Atribut	Keterangan
background	Menentukan gambar latar belakang sel.
bgcolor	Menentukan warna latar belakang sel.
bordercolor-light	Menentukan warna depan bingkai sel.
bordercolor-dark	Menentukan warna "bayangan" bingkai sel.
colspan	Menentukan jumlah kolom yang digabung.
height	Menentukan tinggi sel.
nowrap	Menentukan teks agar tetap satu baris.
rowspan	Menentukan jumlah baris yang digabung.
valign	Menentukan posisi vertikal teks dalam sel.
width	Menentukan lebar sel.

Untuk lebih memahami pengunaan atribut-atribut tersebut, silakan perhatikan contoh di bawah ini.

<table border="1"><tbody>
<tr><th></th><th>Judul Kolom 1</th><th>Judul Kolom 2</th><th>Judul Kolom 3</th></tr>
<tr><th>Judul Baris 1</th><td bgcolor="#FF007F" style="text-align: right;">MM
MM</td><td bgcolor="#FFFF00" style="text-align: center;">M</td><td bgcolor="#00FF00" style="text-align: right;">MMM</td></tr>
<tr valign="baseline"><th>Judul Baris 2</th><td>MMM
MMM</td><td>MMM</td><td>MMM
MMMMM
MMM</td></tr>
<tr><th>Judul Baris 3</th><td valign="bottom">MMMMM</td><td valign="top">MMM
MMMMM</td><td valign="middle">MMMMM</td></tr>
</tbody></table>

Jika contoh di atas telah diterbitkan, maka hasil akan tampak seperti di bawah ini.

	Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Judul Baris 1	MM MM	M	MMM
Judul Baris 2	MMM MMM	MMM	MMM MMMMM MMM
Judul Baris 3	MMMMM	MMM MMMMM	MMMMM

Dalam membuat tabel, ada baiknya kita buat sketsa terlebih dahulu agar kita mudah mengonversinya ke dalam bentuk tag HTML, contohnya seperti di bawah ini.

Sketsa tabel.

Dengan adanya sketsa seperti gambar di atas, pembuatan tabel akan lebih menjadi mudah. Sketsa tersebut dibaca dari kiri ke kanan dan dari atas ke bawah. Kode HTML-nya adalah sebagai berikut:

<table border="1" style="width: 100%;"><tbody>
<tr><td colspan="2" style="text-align: center;">DUA KOLOM DIGABUNG</td><td rowspan="3" style="text-align: center;">TIGA
BARIS
DIGABUNG</td></tr>
<tr><td style="text-align: left;">KOLOM 1</td><td style="text-align: right;">KOLOM 2</td></tr>
<tr><td style="text-align: left;">KOLOM 1</td><td style="text-align: right;">KOLOM 2</td></tr>
<tr align="center"><td colspan="3">TIGA KOLOM DIGABUNG</td></tr>
</tbody></table>

Nah, setelah entri diterbitkan maka kode HTML di atas akan tampak menjadi seperti di bawah ini.

DUA KOLOM DIGABUNG		TIGA BARIS DIGABUNG
KOLOM 1	KOLOM 2
KOLOM 1	KOLOM 2
TIGA KOLOM DIGABUNG

Mengenai atribut-atribut lainnya Anda mencoba-cobanya sendiri. Sedangkan mengenai perataan teks dan yang berhubungan dengan pemformatan huruf lainnya dalam tabel, Anda dapat menggunakan kode HTML atau mengaturnya melalui shortcut "Aligment" serta shorcut lainnya yang telah disediakan Blogger.