Terkadang kita perlu menyampaikan informasi yang disusun dengan berdasarkan tabel.Dan hal ini perlu kita sampaikan dalam bentuk dokumen HTML.Untuk membuat format seperti ini maka akan kita wujudkan dengan menggunakan HTML tag table <table>.Tag table ini juga memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi.
Berikut 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 / 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/tinggi tabel (dalam % atau pixel) |
| align (left, right, center) | pengaturan posisi rata kanan/kiri/tengah |
| valign (top, bottom, middle) | pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah |
| colspan=n | ekstensi (span) n jumlah kolom ke kanan |
| rowspan=n | ekstensi (span) n jumlah kolom baris ke bawah |
| nowrap | mematikan word wrapping |
Contoh pembuatan table 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>
Hasilnya:
| sel 1 | sel 2 | sel 3 |
|---|---|---|
| sel 4 | sel 5 | sel 6 |
| sel 7 | sel 8 | sel 9 |
Contoh pembuatan table 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>
Hasilnya;
| colspan=3 | |||
| rowspan=4 | |||
Artikel di Update pada Februari 17, 2021 11:58 am