Membuat Tabel Menggunakan HTML

Come on guy’s……..
Anda ingin membuat tabel menggunakan script HTML? Mari kita belajar untuk membuatnya…
Berikut ini adalah contoh-contoh pembuatan tabel dengan menggunakan script HTML…




Untuk contoh tabel di atas kode HTMLnya adalah sebagai berikut:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis tabel</title>
</head>

<body>
<font color="Brown" face="arial" size="5">Tabel 1</font>
<table width="561" height="241">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>

</tr>
<tr >
<!--&nbsp;-->
<td width="172" >Angin Reebot Ltd </td>
<td width="27"></td>
<td width="31"></td>
<td width="25"></td>
<td width="33"></td>
<td width="16"></td>

<td width="13"></td>
<td colspan="6" bgcolor="#006600"></td>
<td width="17">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></td>
<td></td>

<td></td>
<td></td>
<td colspan="4" bgcolor="#006600"></td>
<td width="16">+55%</td>
<td width="16"></td>
<td></td>
</tr>

<tr>
<td>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan="2" bgcolor="#FFFF00"></td>
<td width="34"></td>
<td width="16"></td>

<td width="16"></td>
<td width="16"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shutdown Ltd </td>

<td></td>
<td>-75%</td>
<td colspan="4" bgcolor="#FF0000"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td colspan="14" style="border-top:#000000 solid"></td>
</tr>
</table>
<BLINK><font color="Red" face="Comic Sans MS" size="4">By:Retno Damayanti</font></BLINK>
<BR><a href="TugasPraktek2.html">Klik di sini</a> Untuk mengakses desain tabel perbandingan item berikutnya

</body>

</html>






Dan untuk contoh tabel di atas kode HTMLnya adalah sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>
<font color="Brown" face="arial" size="5">Tabel 2</font>
<table width="470" height="401" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4">PERBANDINGAN FITUR</font></td>
</tr>
<tr>
<td width="31"align="center">No</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
<td width="208" align="center">Fitur</td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0">&nbsp;</td>
<td width="92" align="center">Enterprise</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
<td width="0"align="center">Pro</td>
<td width="0"align="center">Free</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
</table>
<BLINK><font color="Blue" face="Monotype Corsiva" size="5">By: Retno Damayanti</font></BLINK>
<BR><a href="TugasPraktek.html">Back</a> Untuk kembali ke halaman utama
</body>
</html>

Comments :

0 komentar to “Membuat Tabel Menggunakan HTML”

Poskan Komentar

My Blog List

Followers

Homepage Bottom Left Widget

Homepage Bottom Middle

Homepage Bottom Right Widget