Untuk membuat table pada halaman HTML kita harus menggunakan tag <table>…</table>. Elemen pada table berisi properti <tr>…</tr> untuk menentukan baris (table row) atau membuat baris baru yang di dalamnya terdapat property <td>…</td> untuk menampilkan data pada setiap sel table (table data) atau untuk membuat kolom baru.
Sebagai contoh struktur elemen table adalah sebagai berikut :
<html><head><title>Struktur Table</title></head><body><table border=”1”><tr><td>data baris 1 kolom 1</td><td>data baris 1 kolom 2</td></tr><tr><td>data baris 2 kolom 1</td><td>data baris 2 kolom 2</td></tr><tr><td>data baris 3 kolom 1</td><td>data baris 3 kolom 2</td></tr></table></body></html>
.png)
Sekarang saya akan menjelaskan atribut yang terdapat dalam tag <table>.
Atribut elemen table :
Width = Lebar tabel
Height = tinggi table
Border = tebal garis table
Cellspacing = spasi antar sel
Cellpadding = spasi di dalam sel
Align = [left | center | right] perataan table
Bgcolor = warna latar belakang table
Atribut table row
Align = [left | center | right] perataan sebaris sel secara horizontal
Valign = [top | middle | bottom] perataan sebaris sel secara vertical
Bgcolor = warna latar belakang baris
Atribut table data :
Rowspan = menggabungkan baris
Colspan = menggabungkan kolom
Align = [left | center | right] perataan horizontal
Valign = [top | middle | bottom] perataan horizontal
Width = lebar sel
Height = tinggi sel
Bgcolor = warna latar belakang sel
Ketikan script HTML berikut pada note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk mencobanya.
<html>
<head>
<title>Tabel</title>
</head>
<body>
Berikut ini contoh table dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0 cellpading=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>