Tag Tabel
Seringkali informasi yang akan ditampilkan adalah informasi olahan yang berbentuk tabel, sehingga kitapun memerlukan format ini di dalam dokumen HTML.
Berikut ini beberapa atribut tag tabel
Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag <th> dan <td> diabaikan
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>
Contoh Tabel 2 :
<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#9999CC">
<tr>
<td width="30%"> </td>
<td colspan="3">colspan=3</td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%"> </td>
<td bgcolor="white" width="20%"> </td>
<td bgcolor="white" width="20%"> </td>
</tr>
<tr>
<td width="31%"> </td>
<td bgcolor="white"> </td>
<td bgcolor="white"> </td>
</tr></table>
Contoh Tabel 3 :
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%"> </td>
<td colspan="3">colspan=3</td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%"> </td>
<td bgcolor="white" width="20%"> </td>
<td bgcolor="white" width="20%"> </td>
</tr>
<tr>
<td width="31%"> </td>
<td bgcolor="white"> </td>
<td bgcolor="white"> </td>
</tr></table>
colspan=3 | |||
rowspan=4 | |||
Contoh Tabel 3 :