- Top Index
Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner
atau iklan</font></strong></td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#FFCCCC"><font color="#FF0000">Daftar
isi atau navigasi </font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#FF6633">Body atau contents(isi)</font></p></td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#9966CC">Info
tambahan atau lain-lain </font></td>
</tr>
</table>
</form>
</body>
</html>
|
- Bottom Index
Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner
/ Judul</font></strong></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#990033">Body atau contents(isi)</font></p></td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000"><strong><font size="+2">Daftar
isi atau navigasi </font></strong></font><font color="#9966CC" size="+2"> </font></td>
</tr>
</table>
</form>
</body>
</html>
|
- Left Index
Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="447" border="1" align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top" bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="627" height="23" align="center" bgcolor="#FFFF99"><strong><font color="#CCCCCC" size="+4">Electronic
Shop</font></strong></th>
</tr>
<tr>
<td height="176" align="center" valign="top" bgcolor="#FFFF99"><p> </p>
<p>Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami.
</p></td>
</tr>
<tr>
<td height="30" align="center" bgcolor="#FFFF99"> <font size="+2">profilkami.com</font></td>
</tr>
</table>
</form>
</body>
</html>
|
- Layout Split
Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>left </title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="512" border="1" align="center">
<tr>
<td width="15%" rowspan="2" align="center" bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
<td width="67%" height="23" align="center" bgcolor="#FFCCFF"><font size="+3"><strong>Banner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center" bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
</tr>
<tr>
<td height="456" align="center" bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#990033">Body atau contents(isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="23" colspan="3" align="center">Lain-lain </td>
</tr>
</table>
</form>
</body>
</html>
|
- Alternating Index
Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>alternating</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="738" border="1" align="center">
<tr>
<td height="248" align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar
isi</strong></font></td>
<td align="center" bgcolor="#FFFFCC"><font color="#000066" size="+7"><strong><em>Gambar
</em> </strong></font></td>
</tr>
<tr>
<td height="261" align="center" bgcolor="#FFFF99"><font color="#CC0000" size="+7"><strong><em>Gambar
</em></strong></font><font size="+7"><em></em></font></td>
<td align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/daftar
isi</strong></font></td>
</tr>
<tr bgcolor="#996666">
<td height="150" colspan="2" align="center"><font color="#FFFFFF"><strong><font size="+1">Lain-lain</font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>
|
