Membuat Tabel Berdasarkan Pengelompokan dalam HTML

Minggu, Februari 13, 2011 | 0 Comments

Untuk membuat suatu tabel, biasanya kita harus mengelompokkan suatu data. Dalam HTML, untuk mengelompokkan data berdasarkan kolom digunakan <colgroup> dan untuk mengelompokkan data berdasarkan baris digunakan kode <tbody>.

Contoh Tabel pengelompokan dalam HTML5


Kode tampilan di atas dapat dilihat dibawah ini :



<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="2.jpeg" />
<title>Perbandingan Sikap</title>
</head>
<body background="remembermere-1280.jpg">
<h2 align="center"><font face="courier new"><u>PERBANDINGAN SIKAP</u></font></h2>
<br/>

<table border=5 frame=hsides rules='groups' align="center" cellpadding=5 cellspacing=20>

<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center'>

<tr>
<th width=50>No.</th>
<th width=200>Spesifikasi Sikap</th>
<th width=50>Poin</th>
<th width=100>Alivi</th>
<th width=100>Ridhuan</th>
<th width=100>Rosi</th>
<th width=100>Salsa</th>
</tr>

<tbody>
<tr>
<td><center>1.</center></td>
<td>Kerja Keras</td>
<td><center>8</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
</tr>

<tr>
<td><center>2.</center></td>
<td>Tekun</td>
<td><center>9</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
</tr>

<tr>
<td><center>3.</center></td>
<td>Tidak sombong</td>
<td><center>6</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
</tr>

<tr>
<td><center>4.</center></td>
<td>Sabar</td>
<td><center>7</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
</tr>

<tr>
<td><center>5.</center></td>
<td>Pemaaf</td>
<td><center>5</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
</tr>

<tbody>
<tr>
<td><center>6.</center></td>
<td>Pemalas</td>
<td><center>-5</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
</tr>

<tr>
<td><center>7.</center></td>
<td>Ceroboh</td>
<td><center>-3</center></td>
<td><center>-</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
</tr>

<tr>
<td><center>8.</center></td>
<td>Tinggi Hati</td>
<td><center>7</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
</tr>

<tr>
<td><center>9.</center></td>
<td>Pendendam</td>
<td><center>-10</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
<td><center>X</center></td>
</tr>

<tr>
<td><center>10.</center></td>
<td>Kurang vitamin</td>
<td><center>-11</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
<td><center>-</center></td>
<td><center>X</center></td>
</tr>

<tbody>
<tr>
<td colspan=3><center><b>Jumlah Poin</b></center></td>
<td><center>40</center></td>
<td><center>-11</center></td>
<td><center>1</center></td>
<td><center>-36</center></td>
</tr>

<tbody align="center">
<tr>
<td colspan=7>&copy; Alivi Nur Rosida</td>
</tr>

<tr>
<td colspan=7>My twitter <a href="http://twitter.com/alivi">@alivi_nr</a></td>
</tr>

</table>

</body>
</html>


selamat mencobaaaa !!! Baca Selengkapnya...

Tidak ada komentar:

Posting Komentar

About

- alivi -