[ojegjogja] Cara mudah membuat dan memasang tabel di blog

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 :