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

sebelumnya : Belajar Script HTML bag 6


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 :


berikutnya : Belajar Script HTML bag  8


Klik disini untuk melihat

Berlangganan konten blog ini:

Tinggalkan Komentar

Email anda tidak akan di publikasikan. Lengkapi Data di bawah ini :