HTML Tag Table

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%”>&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>

Hasilnya;

colspan=3
rowspan=4

Membuat tabel bagian 2

Baca Juga :  HTML tag Alignment
Tags:

Leave a Reply