A Layout that centers the content on the page can have a background color that is a different color from the color of the table.


See full size

 

PART ONE: make the first table

This type of layout actually involves nesting a few tables inside one another. For this example, we will start by making a table that is 650 pixels wide. I will also add some attributes that will make the background of the page maroon (#990000) and make the background of the table white (#FFFFFF) with a orange-yellow border (#CC9900)

 

<html>

<head><title>Alan Levy's 's Personal Site</title></head>

<body bgcolor="#990000" text="#000000">

<div align="center">

<table width="650" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" bordercolor="#CC9900">

<tr>

<td>this is where I will add the navigation</td>

</tr>

<tr>

<td>this is where I will add the content</td>

</table>

</div>

</html>

See what this looks like

The reason why the table is so tiny: because the table will adjust its size to the amount of content in the table. Here we only added only one sentence, so the table didn't have to stretch very much to accomodate it. See what happens when we add some paragraph breaks to the content section to stretch it out a little: See it now

 

PART TWO: make another table inside the cell of the top row for navigation

Now that you have divided your table into 2 sections, the top row for the navigation and the bottom row for the content, you can add another table inside the cell of the top row to hold your navigation bar.

In this example, I have used a 5 column table because I have 5 categories: home, resume, portfolio, links, and contact.

 

<html>

<head><title>Alan Levy's Personal Site</title></head>

<body bgcolor="#990000" text="#000000">

<div align="center">

<p>&nbsp;</p>

<table width="650" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" bordercolor="#CC9900">

<tr>

<td valign="top">

<table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#FFCC00">

<tr>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">HOME</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b>RESUME</b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">PORTFOLIO</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">LINKS</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><b>CONTACT</b></font></div>
</td>

</tr>

</table>

</td>

</tr>

<tr>
<td valign="top">

<p>This is where I will add my content </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


</td>
</tr>
</table>
</div>
</body>

Now see what the page looks like

 

PART THREE: the final step involves making a table to hold the content inside the bottom row. This is not necessary, but it was used here to adjust the positioning of the content in the second row.

See what it looks like before adding this table

See what it looks like after adding this table

<html>

<head><title>Alan Levy's Personal Site</title></head>

<body bgcolor="#990000" text="#000000">

<div align="center">

<p>&nbsp;</p>

<table width="650" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" bordercolor="#CC9900">

<tr>

<td valign="top">

<table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#FFCC00">

<tr>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">HOME</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b>RESUME</b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">PORTFOLIO</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2"><b><font face="Arial, Helvetica, sans-serif">LINKS</font></b></font></div>
</td>

<td width="20%">
<div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><b>CONTACT</b></font></div>
</td>

</tr>

</table>

</td>

</tr>

<tr>

<td valign="top">

<table width="75%" border="0" cellspacing="3" cellpadding="3" align="center">
<tr>

<td valign="top">

<p>&nbsp;</p>

<p><font face="Arial, Helvetica, sans-serif">Welcome to the portfolio
site of Alan Levy. Here you can find out more about my interests,
view my portfolio, and contact me via email.</font></p>

<p><font face="Arial, Helvetica, sans-serif">I will be graduating
in May of 2003 with a degree in Communications, Advertising and
I am currently seeking employment or an internship with a graphic
or Web design agency so I can further enhance my skills and gain
more experience working in a team environment.</font></p>

<p><font face="Arial, Helvetica, sans-serif">Please feel free to
contact me at <a href="mailto:alevy@coventryct.org">alevy@coventryct.org</a>
if you are seeking entry-level help in a communications-related
field.</font></p>

<p>&nbsp;</p>
<p>&nbsp;</p>

</td>

</tr>
</table>


</td>
</tr>
</table>
</div>
</body>

 

Try copying and pasting the above code into Notepad and see if you can get it to work.