Thursday, September 16, 2010

HTML part 2

Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Dalam tag <table> juga terdapat 2 tag yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat kolom. Tag <table> adalah tag penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini


Penasaran? Ayo kita coba lagiii xD
Buatlah file baru seperti biasa pada notepad ;)


A. Latihan 1


<html>
<head>

<title><Atribut dari tag tabel</title>
</head>


<body>
<h1><font color="00FF00">  Membuat Tabel </font></h1> 
<table border="1" bordercolor="black" bgcolor="white" cellpadding="5"
 cellspacing="0" width="75%">
<tr >
<td bgcolor="00FFFF"> a </td>
<td bgcolor="00FFCC"> b </td>
<td bgcolor="00FF66"> c </td>
</tr>


<tr>
<td bgcolor="00CCFF"> d </td>
<td bgcolor="00CCCC"> e </td>
<td bgcolor="00CC66"> f </td>
</tr>


<tr>
<td bgcolor="0099FF"> g </td>
<td bgcolor="0099CC"> h </td>
<td bgcolor="009999"> i </td>
</tr>


<tr>
<td bgcolor="0066FF"> j </td>
<td bgcolor="0066CC"> k </td>
<td bgcolor="006699"> l </td>
</tr>




</table>
</body>
</html>


B. Latihan 2


<html>
<head>
<title>Atribut dari tag</title>
</head>
<body>
<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>


<table border="1" cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">


<tr>
<td>
<p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa<br>
tabel desainer akan mengalami kesulitan dalam mendesain sebuah halaman<br>
web. </p>


<p>Kalau anda perhatikan website yang memiliki tampilan yang tersusun rapi.<br>
Sebenarnya itu adalah tabel, hanya saja atribut<br>
<font color="red"><b>border="0"</b></font>
sehingga tabel seakan tidak ada (transparan).<br>
</p>

<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai<br>
paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.<br>
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel<br>
yang berada di dalam tabel utama.</p><br>


<p align="center">
<!-- tag <table> untuk tabel anak -->
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,-</td>
</tr><!--</table ini untuk menutup tabel anak -->
</table>
</tr>
</table>
</body>
</html>

No comments:

Post a Comment