HTML – Table


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 :

tabel-1

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 :

tabel-2
Contoh 3 :

<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 :

tabel-3

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 :

tabel-4

 


Leave a Reply