Let's build a simple web page using a table In HTML Programming
Now we will build a simple website used a table element in HTML code. We build a simpe web with two coloumn. You can see the example in here. or bellow this
That website combine with tree table.
First, the big table. Table to divide web begin tree a part. that is part of header, content, and footer. The content consist of left side and right side. The left side used to put the menu block, web link, and another block. That the right site used to paragraph of contents.
The second table use to fill in left side on the first table. That is used to arrange the block menu and the other block. And the third table is filled the right side on the first table. its used to arrange the contents of web.
Now we build the big table first. We build this table with a two coloumns and three rows. Lets see the structur of this table first.
Now here's the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->
<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->
<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->
<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->
<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>
Ok, we put the picture on the header part. you can save the picture in here.
<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->
In the left side we will build the second table. See the structur table in here.
Now the code should be like that.
<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>
</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>
</tr>
</table>
<!---- end left block ---->
And now we build the third table. You can see the structur of table
And here's the code.
<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>
Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->
And the last we put a copyright on the footer part like this.
<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->
Ok let's combine all of code, you can see the code here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>
</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>
</tr>
</table>
<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>
Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>
Now you have done make a simple website using a table. it's very easy isn't ?
That website combine with tree table.
First, the big table. Table to divide web begin tree a part. that is part of header, content, and footer. The content consist of left side and right side. The left side used to put the menu block, web link, and another block. That the right site used to paragraph of contents.
The second table use to fill in left side on the first table. That is used to arrange the block menu and the other block. And the third table is filled the right side on the first table. its used to arrange the contents of web.
Now we build the big table first. We build this table with a two coloumns and three rows. Lets see the structur of this table first.
Now here's the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->
<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->
<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->
<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->
<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>
Ok, we put the picture on the header part. you can save the picture in here.
<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->
In the left side we will build the second table. See the structur table in here.
Now the code should be like that.
<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>
</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>
</tr>
</table>
<!---- end left block ---->
And now we build the third table. You can see the structur of table
And here's the code.
<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>
Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->
And the last we put a copyright on the footer part like this.
<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->
Ok let's combine all of code, you can see the code here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>
</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>
</tr>
</table>
<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>
Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>
Now you have done make a simple website using a table. it's very easy isn't ?
posted by Innan Mei Setiyono at 9:18 AM
1 Comments:
Expose your blog to thousands of daily readers... for free!
www.bloggerdirectory.info
Post a Comment
<< Home