Kikimovix Blog: 2009

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>

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>

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

<head>

<title>Grafik Berbasis Tabel 1</title>

</head>

<body>

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

</tr>

<tr>

<td>Command Prompt, Inc </td>

</tr>

<tr>

<td>Hibernate Ltd </td>

</tr>

<tr>

<td>Shutdown Ltd </td>

</tr>

<tr>

</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">

<head>

<title>Perbandingan Berbasis Tabel 2</title>

</head>

<body>

<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 width="200" align="center">Fitur</td>

<td align="center">Enterprise</td>

</tr>

<tr>

</tr>

<tr>

<td>Garansi seumur hidup </td>

</tr>

<tr>

<td>Multiuser</td>

</tr>

<tr>

<td>Update otomatis </td>

</tr>

<tr>

<td>Cetak Laporan </td>

</tr>

<tr>

<td>Notifikasi error </td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 2. Table berupa perbandingan

--SELAMAT MENCOBA--

Kikimovix Blog

Selasa, 15 September 2009

KREASI SEDERHANA TABEL HTML