• ..


Setelah pada kesempatan sebelumnya kita mengetahui bagaimana membentuk sebuah grafik batang dengan menggunakan tabel, pada kesempatan ini, kita akan menggunakan fitur pengelompokan yang ada pada tabel. Sebenarnya hasil tampilan dari fitur ini dapat disamakan dengan hasil ketika kita menggunakan fitur merge. Akan tetapi, disini tabel yang ada tidak akan digabung, hanya "dihilangkan" garis pembatasnya.

Tampilan dari kode HTML diatas adalah sebagai berikut:


 Untuk kode HTML-nya, bisa langsung dilihat dibawah ini :
<!DOCTYPE HTML>
<HTML lang="en">
 <head>
  <title>Tabel Perbandingan Sikap</title>
  <LINK REL="SHORTCUT ICON" HREF="/Prak.BPW/images/ICON%20AJAH/Microsoft%20Xbox.ico"/>
 </head>
 <body>
 <br /><br />
 <table background="/Prak.BPW/images/background2.jpg" align="center">
 <tr>
  <td align="center"><b><i>PERBANDINGAN SIKAP</i></b></td>
 </tr>
 <tr>
 <td><table border=1  rules='groups' cellpadding=5 cellspacing=10>
  <colgroup>
  <colgroup>
  <colgroup>
  <colgroup>
  <colgroup>
  <colgroup>

  <tr>
   <th width=50>No.</th>
   <th width=200>Spesifikasi Sikap</th>
   <th width=75>Poin</th>
   <th width=75>Rizal</th>
   <th width=75>Abdi</th>
   <th width=75>Rian</th>
   <th width=75>Zulkifli</th>
  </tr>

  <tbody>
  <tr align="center">
   <td>1.</td>
   <td align="left">Kerja Keras</td>
   <td>8</td>
   <td>X</td>
   <td>X</td>
   <td>-</td>
   <td>-</td>
  </tr>
  <tr align="center">
   <td>2.</td>
   <td align="left">Tekun</td>
   <td>9</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
   <td>-</td>
  </tr>

  <tr align="center">
   <td>3.</td>
   <td align="left">Tidak sombong</td>
   <td>6</td>
   <td>X</td>
   <td>-</td>
   <td>-</td>
   <td>-</td>
  </tr>

  <tr align="center">
   <td>4.</td>
   <td align="left">Sabar</td>
   <td>7</td>
   <td>X</td>
   <td>-</td>
   <td>-</td>
   <td>-</td>
  </tr>

  <tr align="center">
   <td>5.</td>
   <td align="left">Pemaaf</td>
   <td>10</td>
   <td>X</td>
   <td>-</td>
   <td>X</td>
   <td>-</td>
  </tr>

  <tbody>
  <tr align="center">
   <td>6.</td>
   <td align="left">Pemalas</td>
   <td>-5</td>
   <td>-</td>
   <td>-</td>
   <td>X</td>
   <td>X</td>
  </tr>

  <tr align="center">
   <td>7.</td>
   <td align="left">Ceroboh</td>
   <td>-3</td>
   <td>-</td>
   <td>-</td>
   <td>X</td>
   <td>X</td>
  </tr>

  <tr align="center">
   <td>8.</td>
   <td align="left">Tinggi Hati</td>
   <td>-7</td>
   <td>-</td>
   <td>X</td>
   <td>-</td>
   <td>X</td>
  </tr>

  <tr align="center">
   <td>9.</td>
   <td align="left">Pendendam</td>
   <td>-10</td>
   <td>-</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>

  <tr align="center">
   <td>10.</td>
   <td align="left">Pemarah</td>
   <td>-11</td>
   <td>-</td>
   <td>X</td>
   <td>-</td>
   <td>X</td>
  </tr>

  <tbody>
  <tr align="center">
   <td colspan=3><b>Jumlah Poin</b></td>
   <td>40</td>
   <td>-11</td>
   <td>1</td>
   <td>-36</td>
  </tr>
 </table>
 </td>
 <tr>
  <td><i><br />Source : Forbes Magazine - February, 2011 <br />&copy; haqiphoenix</i></td>
 </tr>
 </table>
 <br /><br />
 <center>HQ&trade; 2011</center>
</body>
</html>