Add to collection(s) Add to saved
  1. Rekayasa & Teknologi
  2. Perancangan web

Tabel di Dalam Tabel

advertisement 
Membuat Layout dengan Tabel
Create By Widiyono, S.Kom
Tujuan Pembelajaran:
1. Peserta didik mempu mencontohkan pembuatan disain layout Halaman
WEB
2. Peserta didik trampil menggunakan perintah table dalam membuat desain
halaman web
3. Peserta didik trampil memodifikasi perintah table dalam membuat desain
halaman web.
<!DOCTYPE html>
Top Index
<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>
<!DOCTYPE html>
<head>
Bottom Index
<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>
<!DOCTYPE html >
<head>
Left Index
<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>
<!DOCTYPE html >
Spilt
<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
<!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>
Download
advertisement