NEW 2 CSS: Help with Header

[gunrkan2]

I have designed a nice basic HTML website at
www.desperadossaloon.com

I have a nice header that I want to use on everysingle page.

<table id="Table_01" align="center" width="762" height="501" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" rowspan="4" align="center" bgcolor="#000000">
<img src="images/LAYOUT_01.gif" width="249" height="82" alt=""></td>
<td rowspan="12" align="center" bgcolor="#000000">
<img src="images/LAYOUT_02.gif" width="20" height="253" alt=""></td>
<td colspan="2" align="center" bgcolor="#000000">
<img src="images/LAYOUT_03.gif" width="199" height="25" alt=""></td>
<td rowspan="12" align="center" bgcolor="#000000">
<img src="images/LAYOUT_04.gif" width="23" height="253" alt=""></td>
<td rowspan="6" align="center" bgcolor="#000000">
<img src="images/LAYOUT_05.gif" width="191" height="117" alt=""></td>
<td colspan="2" rowspan="6" align="center" bgcolor="#000000">
<img src="images/LAYOUT_06.gif" width="77" height="117" alt=""></td>
<td rowspan="17" bgcolor="#FFFFFF">
<img src="images/LAYOUT_07.gif" width="2" height="500" border="0" alt="" usemap="#LAYOUT_07_Map"></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<img src="images/LAYOUT_08.gif" width="199" height="22" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<a href="http://www.desperadossaloon.com/"
onmouseover="window.status='Home'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/LAYOUT_09.gif" width="199" height="26" border="0" alt="Home"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
<a href="./about/">
<img src="images/LAYOUT_10.gif" width="199" height="27" border="0" alt="About Us"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="7" bgcolor="#FFFFFF">
<table id="Table_02" width="249" height="136" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF">
<img src="images/LAYOUT_11.gif" width="249" height="136" alt=""></td>
</tr>
</table></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
<a href="./contact/">
<img src="images/LAYOUT_12.gif" width="199" height="26" border="0" alt="Contact"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="6" bgcolor="#FFFFFF">
<a href="http://maps.yahoo.com/#mvt=m&lat=28.811446&lon=-97.8579&mag=3&q1=312%20S%20Sunset%20Strip%20Kenedy%20Tx%2078119" target="_blank"
onmouseover="window.status='Directions'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/LAYOUT_13.gif" width="268" height="136" border="0" alt="Click Here for Map"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<a href="./events/calander/">
<img src="images/LAYOUT_14.gif" width="199" height="24" border="0" alt="Calander"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<a href="./photos/">
<img src="images/LAYOUT_15.gif" width="199" height="29" border="0" alt="Photos"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<a href="./events/">
<img src="images/LAYOUT_16.gif" width="199" height="28" border="0" alt="Events"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
<img src="images/LAYOUT_17.gif" width="199" height="46" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="images/LAYOUT_18.gif" width="249" height="35" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="images/LAYOUT_19.gif" width="249" height="43" alt=""></td>
<td colspan="7" bgcolor="#FFFFFF">
<img src="images/LAYOUT_20.gif" width="510" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>

I would like to use that on every page. The front page has some css/text in it aready, but that is in source CSS, the news and This week boxes. I want to link this header for every page. I have been out of design for about 5 years and I am lost when it comes to CSS. Please help, thanks Gunner.

Please feel free to go into detail, I really want to learn.

[gjh42]

The first advice would be to convert that humungous table layout code to a more compact div layout. That will make it easier to understand and work with.

To link the one chunk of code to each page, you would put it in a separate file and use PHP to include it in the appropriate place.

There are numerous references on the Web for learning how CSS works, like www.w3schools.com. This forum is not the place for teaching that, nor for teaching how to build an HTML site. If you want to incorporate your design into a Zen Cart site, we will be happy to help with pointers.

[gunrkan2]

Sorry,
Thanks.