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

HEADER
DAFTAR MENU

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 :

Ini kolom pertama Ini kolom kedua
Ini kolom pertama baris kedua Ini kolom kedua baris kedua

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>
     

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

</TR>
</TABLE>

</BODY>
</HTML>

Maka hasilnya adalah seperti ini :

Ini kolom pertama Ini kolom kedua
Ini kolom pertama baris kedua Ini kolom kedua baris kedua

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:

Ini kolom pertama Ini kolom kedua
Ini kolom pertama baris kedua Ini kolom kedua baris kedua

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 :

Ini kolom pertama Ini kolom kedua
Ini kolom pertama baris kedua Ini kolom kedua baris kedua

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>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: