MEMBUAT DESAIN TABEL PERBANDINGAN ITEM DENGAN MEMANFAATKAN FITUR PENGELOMPOKAN
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional??EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Desain Laporan Berbasis Tabel</title>
</head>
<body>
<table width="700" border="0" align="left">
<tr>
<caption><b><p> PERBANDINGAN FITUR <p></caption>
</tr>
<!-- Mengatur Tabel -->
<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<!-- data pertama -->
<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>
<!-- data kedua -->
<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>
<!-- data ketiga -->
<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!-- data keempat -->
<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!-- data kelima -->
<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr
<!-- data keenam -->
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<!-- data ketujuh -->
<tr>
<td width="25" align="center">7</td>
<td width="150">Try ikon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
<body background="floral.jpg">
</table>
</body>
</html>
0 komentar:
Posting Komentar