Type : Tutorial
Labels : HTML5
Level : Easy
Hi, In HTML5, you can create table by putting
<table> </table>in your page. DIV tag can be used together with Table tag to create more attractive table. Ex: if we want to create table with different alignment each cell, you can use DIV tag, to set the alignment.
This code should tell what its look like.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Perbandingan Sikap Asisten</title>
</head>
<body>
<p align="center">Perbandingan Sikap Asisten Praktikum Pemrograman Web </p>
<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" style="bordercolor:black">
<tr>
<td width="50" align="center">No</td>
<td width="200" align="center">Spesifikasi Sikap</td>
<td width="50" align="center">Point</td>
<td width="150" align="center">Herlambang</td>
<td width="150" align="center">Nidhom</td>
<td width="150" align="center">Bian</td>
<td width="150" align="center">Sonny</td>
</tr>
<tr>
<td>
<div align="left">1</div>
<div align="left">2</div>
<div align="left">3</div>
<div align="left">4</div>
<div align="left">5</div>
</td>
<td>
<div align="left">Kerja Keras </div>
<div align="left">Tekun</div>
<div align="left">Tidak Sombong </div>
<div align="left">Rajin Menabung </div>
<div align="left">Pemaaf</div>
</td>
<td>
<div align="left">8</div>
<div align="left">9</div>
<div align="left">6</div>
<div align="left">7</div>
<div align="left">10</div>
</td>
<td>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
</td>
<td>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
</td>
<td>
<div align="center">-</div>
<div align="center">V</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">V</div>
</td>
<td>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
</td>
</tr>
<tr>
<td>
<div align="left">6</div>
<div align="left">7</div>
<div align="left">8</div>
<div align="left">9</div>
<div align="left">10</div>
</td>
<td>
<div align="left">Pemalas</div>
<div align="left">Ceroboh</div>
<div align="left">Tinggi Hati </div>
<div align="left">Pendendam</div>
<div align="left">Kurang Vitamin D </div>
</td>
<td>
<div align="left">-5</div>
<div align="left">-3</div>
<div align="left">-7</div>
<div align="left">-10</div>
<div align="left">-11</div>
</td>
<td>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">-</div>
</td>
<td>
<div align="center">-</div>
<div align="center">-</div>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
</td>
<td>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">-</div>
<div align="center">V</div>
<div align="center">-</div>
</td>
<td>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
<div align="center">V</div>
</td>
</tr>
<tr>
<td colspan="3">
<div align="center">Jumlah Poin </div>
<div align="left"></div>
<div align="left"></div>
</td>
<td>
<div align="center">40</div>
</td>
<td>
<div align="center">-11</div>
</td>
<td>
<div align="center">1</div>
</td>
<td>
<div align="center">-36</div>
</td>
</tr>
</table>
<center>
Source : Teknik Elektro - UM<br>
Copyright @ 2011 gulpi.qorik@gmail.com
</center>
</body>
</html>
You can view Demo below:
Demo Tutorial Table and Div tag
-Fin /bye
Keyword (Indonesia) : tutorial html5 mengenal tag tabel dan tag div
No comments:
Post a Comment