SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: nested tables

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested tables

    I have the following code that gives a nested table with the the green color showing at ALL cells :

    <table border="0" cellspacing="0" width="300">
    <tr>
    <td bgcolor=green>
    <div align="left">
    <table border="0" cellspacing="1" width="300" cellpadding="5">
    <tr>
    <td bgcolor="#000000">&nbsp;</td>
    <td bgcolor="#000000">&nbsp;</td>
    <td bgcolor="#000000">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#C0C0C0">&nbsp;</td>
    <td bgcolor="#C0C0C0">&nbsp;</td>
    <td bgcolor="#C0C0C0">&nbsp;</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>


    I want to make this so that each adjacent <td> be a different height (depending on the cell contents) while at the same time keeping the 1 px green color around all cells. I know of rowspan, colspan... but I want really different cell sizes that may or may not be the equivalent size of 2 (or other) rows or columns

    can anybody help? OR is there a less confusing way of achieving the same result?

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, there is. You could use CSS to get this effect done.
    Just open Notepad and paste this code into it:

    Code:
    td.greenborder {
    border-top: 1px solid #00FFFF;
    border-left: 1px solid #00FFFF;
    border-right: 1px solid #00FFFF;
    border-bottom: 1px solid #00FFFF;
    Save it as styles.css near your index.html file.

    The place the following code in your <HEAD> section:

    Code:
    <link rel="stylesheet" type="text/css" href="styles.css">
    That should get the trick done. You have now given each cell it's own green border, in stead of using the <td> that contained your table-structure. This means you should remove the bgcolor=green attribute from the overlapping <td>

    If you encounter any problems implementing this just say so, and I will see if I can help you get those out of the way .

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx it works, can anybody help me on the second point.
    I need a table (with the borders showing as above) where the size (ESPECIALLY HEIGHT I don't mind the width...) of the cells depend on the contents not rowspan=2

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure if I understand you right, but I would use this table structure:

    Code:
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++
    +          +                         +               +
    + ++++++++ +  +++++++++++++++++++    +  +++++++++++  +
    + +Table1+ +  +                 +    +  + Table 3 +  +
    + +      + +  +     Table 2     +    +  +         +  +
    + ++++++++ +  +                 +    +  +++++++++++  +
    +          +  +                 +    +               +
    +          +  +                 +    +               +
    +          +  +                 +    +               +
    +          +  +                 +    +               +
    +          +  +                 +    +               +
    +          +  +++++++++++++++++++    +               +
    +          +                         +               +
    +          +                         +               +
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++
    The big square is the row you are working in. I divided it up into three cells. Each of these cells holds a table, which can have a height of it's own.

    I hope this is what you meant, if not, try explaining again, and I will give it another try .
    Last edited by Mark T.; May 2, 2002 at 00:59.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark thanx, this is right but I want to make sure that while I am doing that I get the same thickness and color for all cell borders within all the tables (1, 2, 3) and the 'big square' itself also the left and right borders of tables 1, 2 and 3 should be coincident with the cell borders of the big square.
    Thanx again, sorry for the confusion.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you draw an image for me the way you want it? If you create a .gif image of what you want the page to look like, I think I will be able to turn it into HTML for you.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please note that the cell sizes are completely independant of each other.
    Attached Images Attached Images

  8. #8
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I think this is what you are looking for? I made each of the three columns nested tables so you don't have to deal with any rowspans. And I added a cellspacing of 1, just because that with the borders around the cells, when they have a cellspacing of 0, the borders touch and it looks like one thick line on the side where they touch. Feel free to change it back if you like.

    And I put the css internally on the page... call me lazy.
    Anyway, here it is.
    ----------
    <html><head><title>yo</title>
    <style>
    td.greenborder {
    border-top: 1px solid #00FFFF;
    border-left: 1px solid #00FFFF;
    border-right: 1px solid #00FFFF;
    border-bottom: 1px solid #00FFFF;
    }
    </style>
    </head>
    <body>

    <table border="0" cellspacing="0" width="300">
    <tr>

    <td width="70" valign="top"><!-- Begin left column -->

    <table border="0" cellspacing="1" width="70">
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    </table>


    </td><!-- End left column -->

    <td width="160" valign="top"><!-- Begin middle column -->

    <table border="0" cellspacing="1" width="70">
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    </table>


    </td><!-- End middle column -->

    <td width="70" valign="top"><!-- Begin right column -->

    <table border="0" cellspacing="1" width="70">
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    <tr><td class="greenborder">cell</td></tr>
    </table>


    </td><!-- End right column -->

    </tr>
    </table>

    </body>
    </html>

    ----------------
    Enjoy
    Marc Gugliuzza
    marc.gugliuzza.com



  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx again.
    I just made some adjustments as you suggested.
    BTW as far as I know Netscape 4.x doesn't support those CSS rules as my test confirmed. Not that I care about Netscape. In my short time as a HTML wannabe I have really gotten sick of Netscape.

    --------


    <html><head><title>yo</title>
    <style>
    td.greenborder {
    border-top: 1px solid #005830;
    border-left: 1px solid #005830;
    border-right: 1px solid #005830;
    border-bottom: 1px solid #005830;
    }
    </style>
    </head>
    <body>

    <table bgcolor="#005830" border="0" cellspacing="0" width="100%" cellpadding="0">
    <tr>

    <td width="20%" valign="top"><!-- Begin left column -->

    <table bgcolor="#005830" border="0" cellspacing="0" width="100%" cellpadding="0">
    <tr><td bgcolor="red" class="greenborder">cell<br>cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    </table>


    </td><!-- End left column -->

    <td width="60%" valign="top"><!-- Begin middle column -->

    <table bgcolor="#005830" border="0" cellspacing="0" width="100%" cellpadding="0">
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    </table>


    </td><!-- End middle column -->

    <td width="20%" valign="top"><!-- Begin right column -->

    <table bgcolor="#005830" border="0" cellspacing="0" width="100%" cellpadding="0">
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    <tr><td bgcolor="red" class="greenborder">cell</td></tr>
    </table>


    </td><!-- End right column -->

    </tr>
    </table>

    </body>
    </html>










    until I responded to this post I thought it was the same Mark(c) that answered! Mark T. please give me your idea too eventhough Marc's is what I wanted
    Last edited by rezag; May 4, 2002 at 00:06.

  10. #10
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, it took me a while to reply, but here it is .

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Table setup</title>
    <style>
    td.news { 
    border-top: 1px solid #005830; 
    border-left: 1px solid #005830; 
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.subscribe {
    border-left: 1px solid #005830; 
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.trivia {
    border-left: 1px solid #005830; 
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.articles {
    border-top: 1px solid #005830; 
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.game {
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.sitenews {
    border-top: 1px solid #005830; 
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    
    td.poll {
    border-right: 1px solid #005830; 
    border-bottom: 1px solid #005830; 
    }
    </style>
    </head>
    
    <body rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
    
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    	<tr>
    		<td width="15%">
    		
    		<table width="100%" cellspacing="0" cellpadding="0" height="100%" border="1">
    			<tr>
    				<td class=news height="33%" width="100%">
    				News
    				</td>
    			</tr>
    			
    			<tr>
    				<td class=subscribe height="33%" width="100%">
    				Subscribe
    				</td>
    			</tr>			
    			
    			<tr>
    				<td class=trivia height="33%" width="100%">
    				Trivia
    				</td>
    			</tr>
    		</table>
    		
    		</td>
    		
    		<td>
    		
    		<table width="100%" cellspacing="0" cellpadding="0" height="100%">
    			<tr>
    				<td class=articles height="33%" width="100%">
    				Articles
    				</td>
    			</tr>
    			
    			<tr>
    				<td class=game height="25%" width="100%">
    				Game of the week
    				</td>
    			</tr>
    		</table>
    		
    		</td>
    		
    		<td width="15%">
    		
    		<table width="100%" cellspacing="0" cellpadding="0" height="100%">
    			<tr>
    				<td class=sitenews height="50%" width="100%">
    				Sitenews
    				</td>
    			</tr>
    			
    			<tr>
    				<td class=poll height="50%" width="100%">
    				Poll
    				</td>
    			</tr>
    		</table>
    		
    		</td>
    	</tr>
    </table>
    
    </body>
    </html>
    It should be what you are looking for. I gave all the cells percentages in widths, so that it would fit nicely in every resolution. I think Marc already showed you the general idea, using nested tables, I just refined it a bit .

    Have fun with it!

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx to you both

  12. #12
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, I'm glad to see it helped.

    If you want to fix that problem with netscape 4.x, the way I would do it would be to make an extra cell to the left of, top of, right of, and bottom of each cell there is now and make it only one pixel wide and fill it with that green color. It may seem like a lot of work, but it's really not (once you get used to it ). But then again, you said you don't care about netscape, so it's fine as it is.
    Marc Gugliuzza
    marc.gugliuzza.com



  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx for the Netscape info. I have and still use Netscape to browse the net but when I get into testing pages it really is a headache. I can show you pages I made that even the <hr> doesn't work properly.
    I know it is an issue of them deciding not to support certain attributes but sometimes it goes beyond browser support...I could go on for days


Bookmarks

Posting Permissions

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