Belajar Script HTML bag 7

Tag Tabel

Seringkali informasi yang akan ditampilkan adalah informasi olahan yang berbentuk tabel, sehingga kitapun memerlukan format ini di dalam dokumen HTML. Format ini dapat diwujudkan dengan menggunakan tag tabel <tabel>. Sedikit berbeda dengan tag lainnya, tag tabel ini memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi. Berikut ini uraiannya :
Tag Parent Fungsi
<table>
</table>
--- tag utama
<caption>
</caption>
<table> Menampilkan judul tabel
<tr></tr> <table> Tag baris
<th></th> <tr> Header table
<td></td> <tr> Tag sel-sel tabel

Berikut ini beberapa atribut tag tabel
Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
cellspacing jarak antar cell
cellpadding jarak teks ke cell
border lebar garis batas, 0=tanpa garis batas

Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag <th> dan <td> diabaikan
Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
align (left, right, center) pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah
valign (top, bottom, middle) pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah
colspan=n ekstensi (span) n kolom ke kanan
rospan=n ekstensi (span) n baris ke bawah
nowrap mematikan word wrapping


Contoh Tabel 1 :

<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="yellow">
<tr>
<th>sel 1</th>
<th>sel 2</th>
<th>sel 3</th>

</tr>
<tr>
<td align=left> sel 4</td>
<td align=center>sel 5</td>
<td align=right>sel 6</td>

</tr>
<tr bgcolor="orange">
<td width="100" height="75" valign=top>sel 7</td>
<td width="35%" height="75" valign=middle>sel 8</td>
<td height="75" valign=bottom>sel 9</td>

</tr>

</table>
 
sel 1 sel 2 sel 3
sel 4 sel 5 sel 6
sel 7 sel 8 sel 9

Contoh Tabel 2 :
<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#9999CC">
<tr>
<td width="30%">&nbsp;</td>
<td colspan="3">colspan=3</td>

</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>

</tr>
<tr>
<td width="31%">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>

</tr>
</table>
colspan=3
rowspan=4


Contoh Tabel 3 :

Klik disini untuk melihat

Label: