Tabel komponen pentng dalam desain web. Karena denga menggunakan table anda dapat menyampaikan informasi secara jelas dan mudah dipahami. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
<TABLE>…</TABLE>, <TR>…</TR>, dan <TD>…</TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>.
Tag <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 persen.
Contoh :
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
</TABLE>
Tag <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>
</TR>
Tag <TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
• align – perataan: rata kiri (left), tengah (center) atau kanan (right).
• background - image yang digunakan sebagai latar belakang dari kolom.
• bgcolor - warna latar belakang
• colspan – member jarak antara kolom
• height - ukuran tinggi cell dalam pixels.
• nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan – membuat jarak antara row
• valign - perataan vertikal :top, middle atau bottom.
• width - ukuran kolom dalam pixel atau percen.
Setelah memahami penjelasan sedikit di atas, maka contoh di bawah ini merupakan kreasi sederhana dalam membuat table. Contoh disertai dengan format HTML dan hasilnya:
CONTOH MEMBUAT TABLE BERUPA GRAFIK
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis Tabel 1</title>
</head>
<body>
<table width="550" height="250">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000
solid;"><b>Perusahaan</td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
</tr>
<tr >
<td width="175" >Angin Reebot Ltd </td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td colspan="6" bgcolor="#006712"></td>
<td width="25">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4" bgcolor="#006712"></td>
<td width="25">+55%</td>
<td width="25"></td>
<td></td>
</tr>
<tr>
<td>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan="2" bgcolor="#FFE900"></td>
<td width="15"></td>
<td width="15"></td>
<td width="15"></td>
<td width="15"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shutdown Ltd </td>
<td></td>
<td>-75%</td>
<td colspan="4" bgcolor="#FF0120"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="18" style="border-top:#000000 solid"></td>
</tr>
</table>
</body>
</html>
Gambar 1. Table berupa grafik
CARA MEMBUAT TABLE PERBANDINGAN
Maka dapat dituliskan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Perbandingan Berbasis Tabel 2</title>
</head>
<body>
<table width="500" height="500" border="0">
<tr>
<td colspan="10" style="border-bottom:#000000 solid;"><p align="center"><font color="black"
face="TIME NEW ROMAN" size"6">PERBANDINGAN FITUR</font></td>
</tr>
<tr>
<td align="center">No</td>
<td rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td width="200" align="center">Fitur</td>
<td rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td align="center">Enterprise</td>
<td rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td align="center">Pro</td>
<td align="center">Free</td>
</tr>
<tr>
<td colspan="10" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid;"></td>
</tr>
</table>
</body>
</html>
Gambar 2. Table berupa perbandingan
--SELAMAT MENCOBA--
