.jpg)
Gambar 1
Tabel pada HTML dapat dimanfaatkan dan dimodifikasi untuk merepresentasikan beberapa hal diantaranya untuk merepresentasikan diagram batang seperti yang ditunjukkan
Gambar 1.
Untuk memodifikasi tabel agar tampak seperti gambar 1, kita bisa memanfaatkan penggunaan tabel di dalam tabel. Rincian langkahnya adalah sebagai berikut:
1. Buat tabel utama yang mempunyai width=600. Tabel ini nantinya akan terdiri dari 2 row(baris).
Baris pertama akan diisi tabel yang berisi nama perusahaan dan pendapatan sementara baris kedua diisi tabel yang memuat data-data seperti nama-nama perusahaan dan pendapatannya masing-masing.
2. Buat tabel pertama yang berisi teks "Perusahaan" dan "Pendapatan" di dalam row pertama dari tabel no.1.
3. Buat tabel kedua yang berisi data nama-nama perusahaan dan pendapatannya di dalam row kedua dari tabel no.1.
4. Untuk membuat diagram batang pendapatan, buat tabel baru dan masukkan tabel tersebut sebagai data kolom ke dalam row tabel no.3. Beri warna dan border pada tabel yang baru kita buat ini.
Lebih lengkapnya, source kodenya adalah sebagai berikut :
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>tugas Praktikum 1</title>
</head>
<body>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table frame="hsides" align="left" cellspacing="0" cellpadding="5">
<tr><!-- Mengatur lebar kolom -->
<th width="200">Perusahaan</th>
<th width="500">Pendapatan</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="1">
<tr><!-- Mengatur lebar kolom -->
<td width="200">Angin Reboot Ltd</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="150" colspan="5" ><table border="2"><tr><th width="150" height="16" colspan="5" bgcolor="green"></th></tr></table></td>
<td >+150%</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
</tr>
<tr><!-- Mengatur lebar kolom -->
<td width="200">Command Prompt Inc</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="50" colspan="2"><table border="2"><tr><td width="50" height="16" colspan="2" bgcolor="green"></td></tr></table></td>
<td width="25">+50%</td>
<td width="25"></td>
<td width="25"></td>
</tr>
<tr><!-- Mengatur lebar kolom -->
<td width="200">Hibernate Ltd</td>
<td width="50"></td>
<td width="25"></td>
<td width="25" align="right">-23%</td>
<td width="25"><table border="2" align="right"><tr><td width="20" height="16" bgcolor="yellow"></td></tr></table></td>
<td width="25"></td>
<td width="25"></td>
</tr>
<tr><!-- Mengatur lebar kolom -->
<td width="200">Shutdown Ltd</td>
<td width="25"></td>
<td width="25"></td>
<td width="25">-75%</td>
<td width="100"><table border="2"><tr><td width="100" height="16" colspan="3" bgcolor="red"></td></tr></table></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 width="25"></td>
<td width="25"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Dalam source kode tersebut digunakan atribut frame.
frame="hsides" pada tabel no.2 dimanfaatkan untuk membuat garis hanya pada sisi atas dan bawah tabel.
Sementara frame="below" pada tabel no.3 digunakan untuk memberi garis hanya pada garis horizontal paling bawah dari tabel.
Hasilnya :
3 komentar:
Assalamu'alaikum Wr. Wb.
Uraiannya cukup jelas
Hanya saja, pendekatan yg digunakan (tabel bersarang) menurut saya kurang praktis :-)
Tapi tampilannya sdh sesuai dg tujuan.,
Thanks Buanget ya,mbak...blog ni sangat membantu tugasku pemrograman web.
jelek
Posting Komentar