Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    fixed table widths with rowspans and colspans

    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

    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
    Last edited by chris19-9; 10-07-2009 at 03:20 PM. Reason: missing / for [CODE]

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The easiest way to accomplish this would be to float the images to the left.


    Code:
    <div id="container">
    
    <img src="Header01.jpg" alt="" />
    <img src="Header02.jpg" alt="" />
    <img src="Header03.jpg" alt="" />
    
    etc...
    
    </div>

    CSS:

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

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •