Table
Tag yang berfungsi dalam pembuatan tabel meliputi:
- Table tag <table> </table>, digunakan untuk mendefinisikansebuah tabel. Table tag memiliki beberapa elemen yaitu align, background, bgcolor, border, cellpadding, cellspacing,bordercolor, width, valign serta rowspan dan colspan.
- Table data tag <td> </td>, digunakan untuk mendefinisikan isi dari setiap sel atau kolom dalam baris tabel yang telah dibuatdengan tag <tr>.
- Table header tag <th> </th>, digunakan untuk mendefinisikanjudul setiap baris atau kolom.
- Table row tag <tr> </tr>, digunakan untuk mendefinisikan sebuah baris dalam tabel.
Contoh Table :
<table align=center border=0 cellpadding=5 cellspacing=2>
<tr>
<td colspan=2> </td>
<th colspan=3 bgcolor=#0099AA> Topik </th>
</tr>
<tr>
<td colspan=2> </td>
<th bgcolor=#0099AA> HTML </th>
<th bgcolor=#0099AA> ASP </th>
<th bgcolor=#0099AA> PHP </th>
</tr>
<tr>
<th rowspan=3 bgcolor=#0088CC> Waktu </th>
<th bgcolor=#0088CC> Pagi </th>
<td> Penuh </td>
<td> Kosong </td>
<td> Kosong </td>
</tr>
<tr>
<th bgcolor=#0088CC> Siang </th>
<td> Penuh </td>
<td> Penuh </td>
<td> Kosong </td>
</tr>
<tr>
<th bgcolor=#0088CC> Malam </th>
<td> Kosong </td>
<td> Kosong </td>
<td> Penuh </td>
</tr>
</table>
Frame
Jendela web browser dapat dibagi menjadi beberapa bagian yang lebih kecil dengan adanya frame set tag. Masing-masing bagian tersebut dapat terdiri dari dokumen HTML tersendiri, sehingga pada satu saat yang bersamaan dapat ditampilkan beragam informasi.
Contoh :
//frame.html
<frameset rows=”20%,*”>
<frame src=”frame-top.html”>
<frameset cols=”22%,*”>
<frame src=”frame-left.html”>
<frame src=”">
</frameset>
</frameset>
//frame-left.html
<body bgcolor=”#CCCCCC”>
<base target=”content”>
<b>
Menu Utama:<br>
<a href=”content1.html”>Pemrograman HTML</a><br>
<a href=”content2.html”>Pemrograman ASP</a><br>
<a href=”content3.html”>Pemrograman PHP</a><br>
</b>
</body>
//frame-top.html
<body bgcolor=”#CCCCCC”>
<center>
<H1> XXX</H1>
<H3> Contoh Penggunaan Frame</H3>
</center>
</body>
Penerapan Aplikasi
Berikut ini akan diberikan contoh sintaks untuk membuat suatu halaman register bagi suatu user.
//daftar.html
<html>
<head>
<title>xxx</title>
</head>
<body>
<form method=”post” action=”daftar.php”>
<table width=”501″ border=”0″ align=”center”>
<tr>
<td colspan=”2″><div align=”center”>
<p class=”style1″>Formulir Pendaftaran Anggota Baru </p>
<p class=”style1″> </p>
</div></td>
</tr>
<tr>
<td width=”172″><em>User ID </em></td>
<td width=”319″><input size=”50″ /> </td>
</tr>
<tr>
<td><em>Password</em></td>
<td><input type=”password” size=”50″ /></td>
</tr>
<tr>
<td><em>Password (Ulangi)</em></td>
<td><input type=”password” size=”50″ /></td>
</tr>
<tr>
<td><em>Nama Anda </em></td>
<td><input type=”text” size=”50″ /></td>
</tr>
<tr>
<td><em>Tanggal Lahir </em></td>
<td>
<select name=”tgl”>
<option selected value=”-”>Tanggal</option>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
<option value=”06″>06</option>
<option value=”07″>07</option>
…..
</select>
<select>
<option selected value=”-”>Bulan</option>
<option value=”01″>Januari</option>
<option value=”02″>Februari</option>
<option value=”03″>Maret</option>
<option value=”04″>April</option>
<option value=”05″>Mei</option>
….
</select>
Tahun
<input type=”text” size=”13″/> </td>
</tr>
<tr>
<td><em>Telepon</em></td>
<td><input type=”text” size=”50″ /></td>
</tr>
<tr>
<td><em>Alamat</em></td>
<td><input type=”text” size=”50″ /></td>
</tr>
<tr>
<td><em>Kota</em></td>
<td><input type=”text” size=”50″ /></td>
</tr>
<tr>
<td><em>Propinsi</em></td>
<td><select name=”prop”>
<option selected value=”-”>[Pilih Salah Satu]</option>
<option value=”Aceh, D.I”>Aceh, D.I</option>
<option value=”Bali”>Bali</option>
<option value=”Bangka Belitung”>Bangka Belitung</option>
<option value=”Banten”>Banten</option>
<option value=”Bengkulu”>Bengkulu</option>
<option value=”Gorontalo”>Gorontalo</option>
<option value=”Jakarta, DKI”>Jakarta, DKI</option>
……
</select></td>
</tr>
<tr>
<td><em>Email</em></td>
<td><input type=”text” size=”50″ /></td>
</tr>
<tr>
<td> </td>
<td><input type=”submit” value=”Daftar” />
<tt> <input type=”reset” value=”Batal”/></td>
</tr>
</table>
</form>
</body>
</html>
