Dalam membuat Template Desain Web diatas menggunakan table.
Untuk membuat desain seperti diatas dibutuhkan 4 tabel, yaitu header, footer, left menu, contens dan right menu.
Pembuatan Header menggunakan source code sebagai berikut :
<td width="950" td height="80" align="center" colspan=3 bgcolor="#BDB76B"><b>Header</b>
source code diatas menggabungkan 3 tabel menjadi satu
Pembuatan Footer menggunakan source code sebagai berikut :
<td width="750" td height="55" colspan="3" bgcolor="#BDB76B" align="center"><b>Footer</b></td>
source code diatas menggabungkan 3 tabel menjadi satu
Pembuatan left menu, contens dan right menu dan mengatur lebar kolom. source code nya seperti berikut :
<td width="250" td height="450" align="center" bgcolor="#008000"><b>Left Menu</b></td>
<td width="450" td height="450" align="center" bgcolor="#008000"><b>Contents</b></td>
<td width="250" td height="450" align="center" bgcolor="#008000"><b>Right Menu</b></td>
source code atribut tabel ditunjukkan seperti di bawah:
<table border=1 align="center" cellspacing=0 cellpadding=10>
Jika kita ingin menambahkan background colour maka source code adalah
bgcolor="#kode warna"
source code keseluruhannya seperti dibawah ini :
<!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>Demo desain web dengan tabel</title>
</head>
<body>
<table border=1 align="center" cellspacing=0 cellpadding=10>
<tr>
<td width="950" td height="80" align="center" colspan=3 bgcolor="#BDB76B"><b>Header</b>
</td>
</tr>
<tr>
<!--mengatur lebar kolom-->
<td width="250" td height="450" align="center" bgcolor="#008000"><b>Left Menu</b></td>
<td width="450" td height="450" align="center" bgcolor="#008000"><b>Contents</b></td>
<td width="250" td height="450" align="center" bgcolor="#008000"><b>Right Menu</b></td>
</tr>
<!--Footer-->
<tr>
<td width="750" td height="55" colspan="3" bgcolor="#BDB76B" align="center"><b>Footer</b></td>
</tr>
</table>
</body>
Tidak ada komentar:
Posting Komentar