nested tables

**rezag** · May 1, 2002 01:23

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"> </td>
<td bgcolor="#000000"> </td>
<td bgcolor="#000000"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#C0C0C0"> </td>
<td bgcolor="#C0C0C0"> </td>
<td bgcolor="#C0C0C0"> </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?

**Mark T.** · May 1, 2002 01:58

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

.

**rezag** · May 1, 2002 19:50

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

**Mark T.** · May 2, 2002 00:55

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

.

**rezag** · May 2, 2002 09:40

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.

**Mark T.** · May 2, 2002 09:49

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.

**rezag** · May 2, 2002 11:54

please note that the cell sizes are completely independant of each other.

**Marc** · May 3, 2002 22:52

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">

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

</td>

<td width="160" valign="top">

<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>

<td width="70" valign="top">

<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>

</tr>
</table>

</body>
</html>
----------------
Enjoy

**rezag** · May 4, 2002 00:02

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">

<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>

<td width="60%" valign="top">

<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>

<td width="20%" valign="top">

<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>

</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

**Mark T.** · May 4, 2002 03:19

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!

**rezag** · May 4, 2002 09:03

Thanx to you both

**Marc** · May 4, 2002 09:19

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.

**rezag** · May 4, 2002 10:13

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

User Tag List

Thread: nested tables

Thread Tools

Display

nested tables

Bookmarks

Bookmarks

Posting Permissions