fixed table widths with rowspans and colspans

[chris19-9]

hi all,

i did my site at http://browsershots.org/http://visua...magazine.com/#

knew there would be certain sites that didnt keep my table together and some that couldnt display flash elements.

So i need to stop my header, which i sliced for quicker download, rather than one big jpg that download, and to inhibit easy saving of my header as whole (print screen ppl, low res).

But how can i keep them together.

i read this site, http://www.tek-tips.com/faqs.cfm?fid=4499

<table border=1 width=183 style='table-layout:fixed'>

yeah, i get that.

head

<style>
td {overflow:hidden;}
</style>

head

yep, know what that does.

<col width=67>
<col width=75>
<col width=41>

but this... how can i use these col widths to make sure they stay together at my site with many colspans, rowspans & and (probably bad coding) tables in tables (lazy trying split TD's).

when i used the codes above without the col widths, it did the styles and hides it.

are these the best cross browser/screen resolution ways of having fixed widths?

how can i do them with row spans and colspans? surely i cant have a fixed col width, it will effect the other td's wont it?

well, hopefully you can share your best solutions to fixed widths with rowspans and colspans.

here is my code

<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3" rowspan="2">
			<img src="header_01.jpg" width="510" height="48" alt=""></td>
		<td rowspan="3">
			<img src="header_02.jpg" width="1" height="165" alt=""></td>
		<td colspan="3">
			<img src="header_03.jpg" width="513" height="47" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="47" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="header_04.jpg" width="312" height="118" alt=""></td>
		<td rowspan="3">
			<img src="header_05.jpg" width="201" height="176" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="header_06.jpg" width="217" height="175" alt=""></td>
		<td colspan="2">
			<img src="header_07.jpg" width="293" height="117" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="117" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="header_08.jpg" width="111" height="117" alt=""></td>
		<td colspan="3" rowspan="2">
	    <img src="header_09.jpg" width="362" height="106" alt=""></td>
		<td rowspan="3">
			<img src="header_10.jpg" width="133" height="117" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="58" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="header_11.jpg" width="217" height="59" alt=""></td>
		<td rowspan="2">
			<img src="header_12.jpg" width="201" height="59" alt=""></td>
		<td>
			<img src="spacer.gif" width="1" height="48" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="header_13.jpg" width="362" height="11" alt=""></td>
	</tr>
    <tr><td colspan="7">
        <table border="0" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 0; margin-bottom: 0" height="14">
          <tr>
            <td width="49%" height="1"><font color="#FFFFFF">.</font></td>
            <td width="3%" height="1"></td>
            <td width="48%" height="1">
              <p align="right"><font color="#FFFFFF">.</font></td>
          </tr>
        </table>  
        <div align="right">
        <table border="0" width="100%">
          <tr>
            <td width="33%" align="left"><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=32e74783-44d5-48be-8e1c-9578aa7393cf&amp;type=website&amp;popup=true"></script></td> 
            <td width="33%" align="center"><a class="a2a_dd" href="http://www.addtoany.com/share_save?linkname=Visualisation%20Magazine&amp;linkurl=http%3A%2F%2Fwww.visualisationmagazine.com"><img src="http://static.addtoany.com/buttons/share_save_106_16.gif" width="106" height="16" border="0" alt="Share/Save/Bookmark"/></a><script type="text/javascript">a2a_linkname="Visualisation Magazine";a2a_linkurl="http://www.visualisationmagazine.com";</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script></td> 
            <td width="34%"><!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&pub=visualthinkmap" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0" align="right"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=visualthinkmap"></script>
<!-- AddThis Button END --> 
 </td>  
          </tr>  
        </table>

cheers chris

[ragol_67]

The easiest way to accomplish this would be to float the images to the left.

<div id="container">

<img src="Header01.jpg" alt="" />
<img src="Header02.jpg" alt="" />
<img src="Header03.jpg" alt="" />

etc...

</div>

CSS:

*
{
     padding: 0;
     margin: 0;
}
#container
{
     width: 800px;
     border: 1px solid #000;
}
img
{
     float: left;
}

[effpeetee]

This may be relevent.

Frank