.jpg)
Kalau sebelumnya kita membuat dan memodifikasi tabel untuk membuat diagram batang, kali ini kita akan mencoba membuat tabel yang data-datanya tampak dikelompokkan seperti Gambar 1 ini :
Gambar 1
Model tabel seperti Gambar 1 dapat dibuat dengan memanfaatkan fitur pengelompokan (group).
rules="groups" dan colgroup bisa disebut 'kata kunci' untuk membuat tampilan seperti Gambar 1.
rules="group" digunakan untuk membuat garis horizontal per group data yang kita buat.
Sementara itu, colgroup digunakan untuk membuat garis-garis vertikal yang membatasi kolom-kolom pada tabel.
Kode Program:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="2" cellspacing=0 frame="hsides" rules="groups">
<caption>PERBANDINGAN FITUR</caption>
<!--colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center" span="2">
<thead valign="middle"-->
<tr>
<th width="35">No
<th width="200">Fitur
<th width="100">Enterprise
<th width="50">Pro
<th width="50">Free
</tr>
<tbody>
<tr><td>1<td>Garansi seumur hidup<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>4<td>Cetak laporan<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>5<td>Notifikasi error<td align="center">X<td align="center">X<td align="center">X</tr>
<tbody>
<tr><td>6<td>Ubah tema<td align="center">X<td align="center">X<td align="center">X</tr>
<tr><td>7<td>Try ikon<td align="center">X<td align="center">X<td align="center">X</tr>
</table>
</body>
</html>
rules="groups" dan colgroup bisa disebut 'kata kunci' untuk membuat tampilan seperti Gambar 1.
rules="group" digunakan untuk membuat garis horizontal per group data yang kita buat.
Sementara itu, colgroup digunakan untuk membuat garis-garis vertikal yang membatasi kolom-kolom pada tabel.
Kode Program:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="2" cellspacing=0 frame="hsides" rules="groups">
<caption>PERBANDINGAN FITUR</caption>
<!--colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center" span="2">
<thead valign="middle"-->
<tr>
<th width="35">No
<th width="200">Fitur
<th width="100">Enterprise
<th width="50">Pro
<th width="50">Free
</tr>
<tbody>
<tr><td>1<td>Garansi seumur hidup<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>4<td>Cetak laporan<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>5<td>Notifikasi error<td align="center">X<td align="center">X<td align="center">X</tr>
<tbody>
<tr><td>6<td>Ubah tema<td align="center">X<td align="center">X<td align="center">X</tr>
<tr><td>7<td>Try ikon<td align="center">X<td align="center">X<td align="center">X</tr>
</table>
</body>
</html>
Hasilnya jadi seperti ini :
0 komentar:
Posting Komentar