Fungsi tabel pada sebuah blog tidak bisa kita anggap remeh. Dengan tabel kita bisa membagi suatu halaman menjadi beberapa bagian. Dengan tabel kita juga bisa menyajikan sebuah laporan, meletakkan sebuah gambar atau foto, dan lain sebagainya.Adapaun cara membuat dan memasang tabel di blog adalah sebagai berikut : .
Kode HTML untuk membuat tabel :
Untuk membuat sebuah tabel harus diawali dengan kode <table> dan diakhiri dengan kode </table>
| <tr></tr> | merupakan tag yang berfungsi untuk membuat baris tabel. |
| <td></td> | merupakan tag yang berguna untuk membuat kolom tabel. |
<th></th> merupakan tag yang berguna untuk membuat header.
Tag- tag di atas mempunyai atribut seperti di bawah ini:
| bgcolor | - untuk mewarnai tabel (backgoround). |
| background | - apabila ingin membuat background tabel di ambil dari suatu gambar |
| width | - untuk menentukan lebar tabel |
| height | - untuk menentukan tinggi tabel |
| align | - untuk mengatur perataan horizontal |
| valign | - untuk mengatur perataan vertikal |
| border | - untuk menentukan tebal bingkai bingkai tabel |
| cellspacing | - untuk menentukan jarak antar kolom |
| cellpadding | - untuk menentukan jarak antara isi dengan tepi kolom (margin) |
| colspan | - untuk menentukan berapa kolom tabel yang akan digabung |
| cowspan | - untuk menentukan berapa baris yang akan digabung |
Berikut beberapa contoh tabel :
Tabel: 1 kolom
Kodenya :
<table border="1">
<tr> <td>kolom 1, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> </tr>
<tr> <td>kolom 1, baris 3</td> </tr>
</table>
Hasilnya :
| kolom 1, baris 1 |
| kolom 1, baris 2 |
| kolom 1, baris 3 |
Table: 3 kolm, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td><td>kolom 2, baris 1</td><td bgcolor="yellow">kolom 3, baris 1</td></tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td><td>kolom 3, baris 2</td></tr>
</table>
Hasilnya :
| kolom 1, baris 1 | kolom 2, baris 1 | kolom 3, baris 1 |
| kolom 1, baris 2 | kolom 2 ,baris 2 | kolom 3, baris 2 |
Tabel: 2 kolom, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td> <td>kolom 2, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td> </tr>
</table>
Hasilnya :
| kolom 1, baris 1 | kolom 2, baris 1 |
| kolom 1, baris 2 | kolom 2 ,baris 2 |
Tabel: 2 kolom, 2 baris
Kodenya :
<table width="80%" border="1">
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td><td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td><td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</table>
Hasilnya :
| kolom 1, baris 1 | kolom 2, baris 1 |
| kolom 1, baris 2 | kolom 2, baris 2 |
Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellpadding="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya :
| kolom 1, baris 1 | kolom 2, baris 1 |
| kolom 1, baris 2 | kolom 2, baris 2 |
Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellspacing="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya :
| kolom 1, baris 1 | kolom 2, baris 1 |
| kolom 1, baris 2 | kolom 2, baris 2 |
Table: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" colspan="2">kolom gabungan</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya :
| kolom gabungan |
| kolom 1, baris 2 | kolom 2, baris 2 |
Tabel: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" rowspan="2" width="70%">kolom 1 gabungan</td> <td width="30%">kolom 2</td> </tr>
<tr height="50"> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya :
| kolom 1 gabungan | kolom 2 |
| kolom 2, baris 2 |
Tabel : Background dan teks berwarna
Kodenya :
<table border="1">
<tbody>
<tr bgcolor="blue" style="color: yellow;"> <td>background biru, teks kuning </td> <td>background biru, teks kuning </td> </tr>
<tr> <td bgcolor="blue" style="color: yellow;">background biru, teks kuning </td> <td bgcolor="yellow" style="color: blue;" td="">background kuning, teks biru</td> </tr>
<tr bgcolor="yellow" style="color: blue;"> <td>background kuning, teks biru</td> <td>background kuning, teks biru</td> </tr>
</tbody></table>
Hasilnya :
| background biru, teks kuning | background biru, teks kuning |
| background biru, teks kuning | background kuning, teks biru |
| background kuning, teks biru | background kuning, teks biru |
Tabel difungsikan untuk meletakan banner
Kodenya :
<table border="1" >
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldbuburayam.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldayamgorneg.jpg" height="125" width="200" /></a> </td> </tr>
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/slddadarpenyet.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/sldtempepenyet.jpg" height="125" width="200" /></a> </td> </tr>
</table>
Hasilnya :
