the html table as a webpage, how to use a html table to structure a webpage

Site hosted by Angelfire.com: Build your free website today!

html tutorial

make money
from your website

the html table as a webpage

This entire page is a table!

how it's done
first the margins of the page are set to zero in the body tag of the document
<body MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
or else there is a default margin around the entire table

a simple table was made with two cells

menu this
entire
page
is
just
a
larger
version
of
this
table
the width of the <table> tag is set to 100%
<TABLE width=100% valign=top>
the valign attribute is included to align the table to the top of the page

the width of the first <TD> is set at 150 pixels and the color is set to purple
<TD width=150 valign=top bgcolor=#9900FF>
this is the navigation panel and again the valign attribute is added to align the content to the top of the cell
to ensure the cell remains at the correct width a transparent 1 x 1 pixel gif is used, the gif is stretched to a width of 150 pixels and is valigned to the top of the cell.
<img height=1 width=150 valign=top src="invisible.gif">

the transparent 1 x 1 pixel gif
it has been stretched to 100 x 100 pixels so that users can rightclick on it an save it

transparent gif

the width of the second <TD> is not set, the color is set to white
<TD valign=top bgcolor=#FFFFFF>
again the valign attribute is added to align the content to the top of the cell

this is (almost) the entire code for this page

<HTML> <HEAD> <TITLE>table page</TITLE> </HEAD> <BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0> <TABLE width="100%" border=0 cellspacing=0 cellpadding=5 valign="top"> <TR> <TD width=150 bgcolor="#9900FF" valign="top">  <img valign="top" height=1 width=140 src="invisible.gif"> </TD> <TD bgcolor="#FFFFFF" valign="top">  </TD> </TR> </TABLE> </body> </HTML>

next :
previous : horizontal lines
adding color to tables

html tutorial css tutorial javascript webmaster articles link exchange