Tabel

Tabel merupakan hal yang paling penting dalam membuat interfase website anda. Dengan tabel anda dapat memecahkan layout website menjadi berapa kolom atau baris dengan tabel halaman website anda akan lebih rapi. Tabel merupakan tag html terumit, karena di dalam tag tabel terdapat tag-tag lainnya. Dan tabel saat penting. Karena itu sebelum menerukan, tarik nafas dalam-dalam dan konsentrasi. Untuk membuat tabel maka diperlukan tag_tag dasar seperti : <table></table> tag ini merupakan containers untuk membuat tabel. <tr></tr> di dalam tabel tag ini berfungsi untuk membuat garis <td></td> tag ini untuk membuat kolom. Di dalam tag <tr>harus terdapat tag <td>, anda bisa menambahkan bayak tag <td> di dalam <tr> untuk membuat kolom. <th></th> hanya saja berfungsi sebagai heade, biasanya digunakan pada garis pertama di dalam tabel. Tag atribut <Table><tabel> border cellpadding cellspacing width height name id title bgcolor background align valign <tr> </tr> height bgcolor background align valign title <td></Td> Height Width Bgcolor Background Align Valign Title Colspan rowspan height width Deskripsi Mengatur semua elemen tabel

Membuat baris

Membuat kolom

<th><th>

Header (kepala tabel). Otomatis ke tengah dan tebal,

<tbody> </tbody>

bgcolor background align valign title colspan rowspan height width align valign bgcolor background height width align valign bgcolor background colspan

Format yang berlaku bagi All yang di apit tag.

<colgroup> </colsgroup>

Format yang berlaku bagi kolom

Contoh tabel : Tabel diawali dengan tag <table> dan biasanya memiliki atribut polder. Jikabolder =0 maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <tabel> memiliki atribut cellpadding untuk memberi jarak di dalam kolom dan cellspacing untuk memberi jarak antar kolom. Coba kode berikut ini : <table border="1" width="200" cellpadding="4" cellspacing="5"> <tr> <td width="100">cell 1</td> <td width="100">cell 2</td> </tr> </table> Hasil :

Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaanya. Cobalah untuk mengutak-atik kode di atas dengan mengubah nilai-nilai atributnya. Setiap tabel memmiliki baris dengan menggunakan tag <tr>. Di dalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Utuk lebih jelasnya cobalah ode berikut ini : <table border="1" width="200" cellpadding="2"> <tr> <td width="100" align="center" bgcolor="yellow"><b> Header</b></td> <td width="100" align="center" bgcolor="yellow"><b> Header</b></td> </tr> <tr> <td width="100">cell 1</td> <td width="100">cell 2</td> <tr> <td width="100">cell 3</td> <td width="100">cell 4</td> </tr> </table> Hasilnya :

Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Di dalam kolom <td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <Table> didalamnya, yang berarti anda memasang tabel di dalam tabel. Contoh lainnya : <table border="1" width="200" cellpadding="2"> <tr> <td width="100" align="center" bgcolor="yellow"><b> Header</b></td> <td width="100" align="center" bgcolor="yellow"><b> Header</b></td> </tr> <tr> <td width="100" rowspan="2" valign="top">cell 1</td> <td width="100">cell 2</td> </tr> <tr> <td width="100">cell 2</td> </tr> </table> Hasilnya :

Anda lihat ada atribut rowspan=2 ini berguna untuk menggabungkan 2 barismenjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Jika sudah paham, silahkan mencoba kode berikut ini :

<table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000"> <tr> <td width="100" align="center" bgcolor="#99FF66"><b> Header</b></td> <td width="100" align="center" bgcolor="#99FF66"><b> Header</b></td> </tr> <tr> <td width="100" valign="top" bgcolor="#cccccc" align="left">left</td> <td width="100" bgcolor="#cccccc" align="right">Right</td> </tr> <tr> <td width="200" valign="top" colspan="2" bgcolor="#ffffff" align="center"> Tabel is not cool</td> </tr> <tr> <td width="200" valign="top" colspan="2" bgcolor="#ffffff" align="center"> But it's not easy</td> </tr> </table>

Hasilnya :