Cara Membuat Tabel

Pelajaran berikut ini sangat penting, terutama jika kamu ingin membuat suatu website yang menarik dengan berbagai fasilitas. Kebanyakan website dibuat dengan berbentuk tabel-tabel. Bahkan menggabungkan antara satu tabel dengan tabel yang lain. Tabel memungkinkan kita membuat kolom2. Misalnya kita akan membuat suatu website dengan tampilan seperti ini :

Nah, untuk membuat tampilan website seperti diatas, kita gunakan tag <TABLE> beserta tag2 lain untuk membentuk baris dan kolom. Berikut tag2 yang dipergunakan untuk membentuk suatu tabel :

<TABLE></TABLE> - adalah tag awal, penanda awal dan akhir suatu tabel.
<TR></TR> - adalah tag yang menandakan suatu baris dalam tabel
<TD></TD> - adalah tag yang akan membagi baris menjadi beberapa kolom.

Masing-masing tag memiliki atribut sebagai berikut :

bgcolor - atribut untuk menentukan warna latar belakang
background - atribut untuk menentukan gambar yang akan menjadi latar belakang tabel / kolom
width - atribut untuk menentukan lebar
height - atribut untuk menentukan tinggi
align - mengatur perataan horizontal
valign - mengatur perataan vertikal
border - atribut untuk menentukan lebar bingkai tabel
cellspacing - atribut untuk menentukan jarak antar kolom
cellpadding - atribut untuk menentukan jarak antara isi dengan tepi kolom
colspan - menentukan berapa kolom yang akan digabung
rowspan - menentukan berapa baris yang akan digabung

Dan sekarang, mari kita coba mempraktekkannya satu persatu :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1">

<TR>
<TD>Ini kolom pertama</TD>
<TD>Ini kolom kedua</TD>
</TR>

<TR>

<TD>Ini kolom pertama baris kedua</TD>
<TD>Ini kolom kedua baris

kedua</TD>
</TR>
</TABLE>
</BODY>

</HTML>

Sekarang kita lihat bagaimana hasilnya jika kita jalankan di browser :

Seperti kita lihat, dengan fungsi width, maka kita telah membuat suatu tabel dengan lebar hanya 80% lebar layar. Dengan source yang sama kita akan mencoba mewarnai kolom pertama dengan warna hijau dan kolom kedua kita beri background gambar. Sehingga hasilnya seperti berikut :

<HTML>
<BODY>
<TABLE WIDTH="80%"

BORDER="1">

<TR>
<TD bgcolor="#009900">Ini kolom pertama</TD>

<TD background="background.gif">Ini kolom kedua</TD>
</TR>

<TR>

Maka hasilnya adalah seperti ini :

Sekarang kita akan mencoba 4 atribut sekaligus yaitu width, height, align dan valign. Kolom pertama kita buat lebarnya 70%, sedangkan kolom kedua cukup 30% saja. Selanjutnya tinggi baris kedua kita buat 200. Untuk perataan, kita akan buat kolom pertama baris kedua rata atas dan kolom kedua baris kedua rata kanan. Sehingga sourcenya seperti ini :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1">
<TR>

<TD bgcolor="#009900" width="70%">

Ini kolom pertama</TD>
<TD background="background.gif" width="30%">
Ini kolom kedua</TD>
</TR>

<TR height="200">
<TD valign="top">Ini kolom pertama baris kedua</TD>
<TD

align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Perhatikan huruf-huruf yang dicetak tebal dan merah, itu adalah atribut2 baru yang saya tambahkan. Dengan penambahan tersebut, maka di browser akan terlihat sebagai berikut:

Berikutnya, kita akan mencoba atribut Cellpadding dan cellspacing. Agar kamu tahu bedanya, maka kita akan membuat tabel yang memakai cellpadding dulu. Perhatikan tabel diatas barusan, dan kita akan menambahnya lagi dengan atribut cellpadding

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1" CELLPADDING="5">

<TR>
<TD

bgcolor="#009900" width="70%">
Ini kolom pertama</TD>
<TD

background="background.gif" width="30%">

Ini kolom kedua</TD>

</TR>
<TR height="200">
<TD valign="top">Ini kolom pertama baris

kedua</TD>

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Berikut ini hasilnya :

Tahu kan bedanya? Ya, textnya menjauh dari tepi kolom. Itulah manfaat dari cellpadding, memberi jarak antara text dengan tepi kolom. Lalu apa gunanya cellspacing? Mari kita lihat contoh berikut :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1" CELLSPACING="5">

<TR>
<TD

bgcolor="#009900" width="70%">
Ini kolom pertama</TD>
<TD

background="background.gif" width="30%">

Ini kolom kedua</TD>

</TR>
<TR height="200">
<TD valign="top">Ini kolom pertama baris

kedua</TD>

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Saya gunakan source yang sama dengan sebelumnya, hanya saja sekarang menggunakan cellspacing. Maka hasilnya adalah sebagai berikut :

Yup, kolom-kolom saling menjauh. Dan sekarang tinggal 2 atribut lagi, yaitu colspan dan rowspan. Sekarang kita akan mencoba menggabungkan kolom pertama dan kedua yang ada di baris 1. Berikut sourcenya :

<TABLE WIDTH="80%" BORDER="1"

CELLSPACING="5">

<TR>
<TD bgcolor="#009900" COLSPAN="2">
Ini kolom

gabungan</TD>
</TR>

<TR height="200">
<TD

valign="top">Ini kolom pertama baris kedua</TD>
<TD align="right">Ini kolom kedua

baris kedua</TD>
</TR>

</TABLE>

Perhatikan, saya menempatkan atribut colspan di kolom pertama dan menghapus kolom kedua, karena kita akan menggabungkannya. Saya juga mengganti textnya dengan "Ini kolom gabungan". Dan inilah hasilnya :

Lihat !! Kolom pertama dan kedua telah bergabung dan membentuk kolom gabungan. Berikutnya kita akan coba menggabungkan kolom pertama dengan kolom pertama baris kedua. Berikut sorcenya :

<TABLE WIDTH="80%" BORDER="1" CELLSPACING="5">

<TR>
<TD

bgcolor="#009900" width="70%" ROWSPAN="2">

Ini kolom pertama gabungan</TD>

<TD

background="background.gif" width="30%">
Ini kolom kedua</TD>
</TR>

<TR height="200">

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>

Perhatikan, saya menempatkan rowspan di tag TD kolom pertama, dengan adanya perintah ini, maka 2 baris kolom pertama akan digabung. Dan inilah hasilnya :