Cara mengelompokan tabel dengan menggunakan rules="groups", fungsinya digunakan untuk membuat garis horizontal per group data yang kita buat. Sedangkan colgroups digunakan untuk membuat garis-garis vertikal yang membatasi kolom-kolom pada tabel.
Contoh tampilan seperti di bawah ini:
Adapun kode programnya seperti di bawah ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Tabel Pengelompokan</title>
</head>
<body>
<font color="Black" face="Arial Black" size="5"> Tabel Dengan Fitur Pengelompokan </font>
<br/>
<br/>
<table border="2" cellspacing=0 frame=hsides rules="groups"
summary="Grafik Berbasis Tabel 2">
<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>
<p >By... </p>
<p><em><a href="endrakilla.blogspot.com" target="_blank"><strong>endrakilla.blogspot.com</strong></a></em></p>
</body>
</html>
Untuk lebih kreatif, mungkin bisa mengedit body dengan mengisikan background atau ditambah oleh fitur yang lain. Untuk sementara sekian dulu, mungkin kalau ada masukan silakan menitipkan komentar di bawah. Semoga bisa bermanfaat. Trims.. :-)
0 komentar:
Posting Komentar