Selasa, 21 Februari 2012

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 1Kolom 2Kolom 3
Baris 1 Kolom 1Baris 1 Kolom 2Baris 1 Kolom 3
Baris 2 Kolom 1Baris 2 Kolom 2Baris 2 Kolom 3

Tag <table> memiliki atribut sebagai berikut:

AtributKeterangan
alignMenentukan posisi horizontal tabel.
backgroundMenentukan gambar latar belakang tabel.
bgcolorMenentukan warna latar belakang tabel.
borderMenentukan ketebalan bingkai tabel.
bordercolorMenentukan warna bingkai tabel.
bordercolor-lightMenentukan warna depan bingkai tabel.
bordercolor-darkMenentukan warna "bayangan" bingkai tabel.
cellspacingMenentukan jarak spasi antarsel
cellpaddingMenentukan jarak isi sel dengan bingkai.
heightMenentukan tinggi tabel.
widthMenentukan lebar tabel.
valignMenentukan posisi vertikal teks dalam sel.

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

AtributKeterangan
backgroundMenentukan gambar latar belakang sel.
bgcolorMenentukan warna latar belakang sel.
bordercolor-lightMenentukan warna depan bingkai sel.
bordercolor-darkMenentukan warna "bayangan" bingkai sel.
colspanMenentukan jumlah kolom yang digabung.
heightMenentukan tinggi sel.
nowrapMenentukan teks agar tetap satu baris.
rowspanMenentukan jumlah baris yang digabung.
valignMenentukan posisi vertikal teks dalam sel.
widthMenentukan 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 1Judul Kolom 2Judul Kolom 3
Judul Baris 1MM
MM
MMMM
Judul Baris 2MMM
MMM
MMMMMM
MMMMM
MMM
Judul Baris 3MMMMMMMM
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 DIGABUNGTIGA
BARIS
DIGABUNG
KOLOM 1KOLOM 2
KOLOM 1KOLOM 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.

Tidak ada komentar:

Posting Komentar