HTML mempunyai banyak elemen dasar. Secara garis besar, elemen ini mencakup LINK, TABEL, FRAME, dan FORM. Pada bagian, akan dijelaskan mengenai dasar-dasar dan cara penggunaan elemen dasar TABEL dan FORM.
Tabel merupakan elemen yang digunakan untuk menghasilkan data dalam bentuk tabular, sehingga dapat menyampaikan informasi secara jelas dan mudah dipahami. Terdapat beberapa tag atau elemen utama yang digunakan dalam pembuatan table :
<TABLE>…</TABLE>, <TH> …</TH, ><TR>…</TR>, dan <TD>…</TD>.
PENFORMATAN TABLE
Untuk menformat table dapat menggunakan beberapa atribut dibawah ini :
- align : berfungsi untuk mengatur posisi rata kiri (left), tengah (center) atau kanan (right).
- cellpadding : digunakan untuk mengatur spasi antar border sel dengan isinya.
- cellspacing : digunakan untuk mengatur spasi antar sel.
- width : digunakan untuk menentukan lebar tabel atau sel.
- Merge : digunakan untuk penggabungan sel.
- Rowspan : untuk menggabungkan sel berdasarkan baris.
- Cospan : untuk menggabungkan sel berdasarkan kolom.
- Colgroup : digunakan untuk mengelompokkan berdasarkan kolom.
- Tbody : untuk mengelompokkan berdasarkan kolom.
- Height : untuk menentukan ukuran tinggi sel.
- Nowrap : digunakan untuk membuat isi dari kolom tetap berada pada satu baris.
CONTOH MEMBUAT TABLE BERUPA GRAFIK
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" 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
CONTOH 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
No comments:
Post a Comment