Tabel adalah bagan yang terdiri dari baris dan kolom. HTML menyediakan tag dalam membuat tabel, bahkan membuat tabel di dalam tabel (nested tabel).
Syntaks tabel adalah :
<TABLE>
<TR>
<TD>Isi Sel Baris 1 Kolom 1 </TD>
<TD>Isi Sel Baris 1 Kolom 2</TD>
…
</TR>
…
</TABLE>
Pada syntaks di atas terdapat beberapa tag, yaitu :
- Tag <TABLE></TABLE> merupakan tag dasar membuat tabel
- Tag <TR></TR> merupakan tag untuk membuat baris dalam tabel
- Tag <TD></TD> merupakan tag untuk membuat kolom dalam tabel
Atribut masing-masing tag di atas adalah :
<TABLE></TABLE> |
|
Width | Mengatur lebar tabel (dalam pixel atau persen) |
Border | Mengatur ukuran bingkai tabel |
Cellspacing | Mengatur jarak antar sel |
Cellpadding | Mengatur jarak bingkai dengan isi dalam sel |
Align | Mengatur perataan tabel pada layar (kiri, tengah, kanan) |
Bgcolor | Mengatur warna dasar pada tabel |
Bordercolor | Mengatur warna bingkai tabel |
<TR></TR> |
|
Align | Mengatur perataan isi sel dalam baris secara horisontal (kiri, tengah, kanan) |
Valign | Mengatur perataan isi sel dalam baris secara vertikal (atas, tengah, bawah) |
Bgcolor | Mengatur warna dasar isi sel |
Height | Mengatur tinggi baris |
<TD></TD> |
|
Colspan | Menggabungkan beberapa kolom menjadi satu (ekspansi kolom> |
Rowspan | Menggabungkan beberapa baris menjadi satu (ekspansi baris) |
Width | Mengatur lebar kolom |
Contoh penggunaan syntaks tabel :
Contoh 1 :
<HTML>
<HEAD><TITLE></TILE></HEAD>
<BODY>
<TABLE border=”1″ bgcolor=”yellow“
align=”center“
cellpadding=”20″>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
<TD>1-3</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Hasil dari syntaks di atas adalah :
Contoh 2 :
<HTML>
<HEAD><TITLE></TILE></HEAD>
<BODY>
<TABLE border=”1″>
<TR align=”center”>
<TD colspan=”3″>1-1</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Hasil dari syntaks di atas adalah :
<HTML>
<HEAD><TITLE></TILE></HEAD>
<BODY>
<TABLE border=”1″>
<TR>
<TD rowspan=”2″>1-1</TD>
<TD>1-2</TD>
<TD>1-3</TD>
</TR>
<TR>
<TD>2-2</TD>
<TD>2-3</TD>
</TR>
</TABLE></BODY>
</HTML>
Hasil dari syntaks di atas adalah :
Penggunaan tag tabel juga dapat dimanfaatkan untuk merapikan form yang sudah kita buat, sehingga tampilan form tersebut menjadi lebih rapi dan enak dilihat. Contoh penggunaan tabel dalam merapikan form adalah sebagai berikut :