Tabel

Tabel
sangat penting artinya dalam desain web. Karena
dengan menggunakan tag table kita dapat membuat
halaman web "terbagi" pada beberapa
kolom atau baris. Contohnya seperti pada halaman
web yang sedang kita baca ini.

Terdapat
tiga tag atau elemen utama yang digunakan dalam
pembuatan table : <TABLE>, <TR>, dan
<TD>. Yang perlu diingat adalah bahwa tab
<TR> dan <TD> harus terletak di antara
tag <TABLE> dan </TABLE>

<TABLE>



Terdiri dari atribut :

• align
  - perataan : rata kiri (left), tengah (center)
  atau kanan (right).
  
• bgcolor
  - warna latar belakang (background) dari tabel.
  
  
• border
  - ukuran lebar border tabel (dalam pixel).
  
  
• cellpadding
  - jarak antara isi cell dengan batas cell
  (dalam pixel).
  
• cellspacing
  - jarak antar cell (dalam pixel).
  
• width
  - ukuran tabel dalam pixel atau percent.
  

Contoh
:



<TABLE
align="center" bgcolor="#0000FF" border="2" cellpadding="5"
cellspacing="2" width="90%">>

<TR>


Tag
ini digunakan untuk membuat baris baru (pada tabel).
Terdiri dari atribut:

• align
  - perataan : rata kiri (left), tengah (center)
  atau kanan (right).
  
• bgcolor
  - warna latar belakang dari baris.
  
• valign
  - perataan vertikal : top, middle atau bottom.
  

Contoh
:




<TR
align="right" bgcolor="#0000FF" valign=top>

<TD>


Tag
ini digunakan untuk membuat kolom baru pada tabel.

• align
  - perataan
  
• background
  - image yang digunakan sebagai latar belakang
  dari kolom.
  
• bgcolor
  - warna latar belakang
  
• colspan
  - lihat gambar contoh
  
• height
  - ukuran tinggi cell dalam pixels.
  
• nowrap
  - membuat supaya isi dari kolom tetap berada
  pada satu baris.
  
• rowspan
  - lihat gambar contoh
  
• valign
  - perataan vertikal :top, middle atau bottom.
  
  
• >width
  - ukuran kolom dalam pixel atau percen.
  

Contoh
:



<TD
align="right" background="back.gif" bgcolor="#0000FF"
colspan="3" height="200" nowrap rowspan="2" valign="bottom"
width="300">

<table width="100" border="1" cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#0000FF"> &nbsp;</td> <td bgcolor="#FFFF66">&nbsp;</td> <td rowspan="2" bgcolor="#FF3366">&nbsp;</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp;</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp;</td> </tr> </table>

border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#0000FF">&nbsp; </td> <td bgcolor="#FFFF66">&nbsp;</td> <td rowspan="2" bgcolor="#FF3366">&nbsp;</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp;</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp;</td> </tr> </table>