A complex Table ---- Is it possible?

[KingofSnake]

I am trying to make a table that is kind of complex. I thought it would be best just to make a drawing of the layout I wanted, so I did.

http://www.intotheblood.f2s.com/extra/table.jpg

Is that possible?
KingOfSnake - The only sports drink with ice crystals
(and marshmellos!)

 

[DeZiner]

In your large box in the lower right, make it two columns. The line seperating them should match the line above that is out there on its own. Then to combine the extra column you made use the 'colspan' property of the <td> tag.

This will help maintain the layout and proportion to what you want it to be. DeZiner

When the gears stop turning,
we all stop learning.

 

[Boomerang]

This is an example. The attribute frame=void disable the borders round the second table. Unfortunatly it doesn't work in NN.

<table border=1 cellpadding=0 cellspacing=0 width=500>
 <tr>
	<td width=200>
	A
	</td>
	<td width=300>
	B
	</td>
 </tr>
 <tr>
	<td colspan=2>
	<table border=1 cellpadding=0 cellspacing=0 frame=void>
		<tr>
			<td width=150>
			C
			</td>
			<td width=350 rowspan=3>
			D
			</td>
		</tr>
		<tr>
			<td>
			E
			</td>
		</tr>
		<tr>
			<td>
			F
			</td>
		</tr>
	</table>
	</td>
</table>

Off course there are other ways and maybe someone else wil post an other example, but you've got a start now.

Hope this help you,

Erik

 

[Boomerang]

Off course you can set for example the heigth=100 in the <td>'s A, C and F

 

[secretsquirrel]

try this, you only need to use one table...

<table width=&quot;400&quot; border=&quot;2&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;400&quot; bordercolor=&quot;#000000&quot;>
<tr>
<td colspan=&quot;2&quot; height=&quot;115&quot;> </td>
<td height=&quot;115&quot; width=&quot;66%&quot;> </td>
</tr>
<tr>
<td height=&quot;120&quot; width=&quot;25%&quot;> </td>
<td colspan=&quot;2&quot; rowspan=&quot;3&quot;> </td>
</tr>
<tr>
<td height=&quot;45&quot; width=&quot;25%&quot;> </td>
</tr>
<tr>
<td height=&quot;115&quot; width=&quot;25%&quot;> </td>
</tr>
</table>

...the heights and widths are similar to your image, but not perfect so you may have to tweak it a bit.

ss

 

[EugenePaliev]

Hello KingofSnake!

Here is the code:

<table width=&quot;403&quot; border=&quot;5&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;399&quot; bordercolor=&quot;#000000&quot;>
<tr>
<td height=&quot;109&quot; colspan=&quot;2&quot;>&nbsp;</td>
<td height=&quot;109&quot; width=&quot;243&quot;>&nbsp;</td>
</tr>
<tr>
<td height=&quot;121&quot; width=&quot;111&quot;>&nbsp;</td>
<td height=&quot;215&quot; colspan=&quot;2&quot; rowspan=&quot;3&quot;>&nbsp;</td>
</tr>
<tr>
<td height=&quot;47&quot; width=&quot;111&quot;>&nbsp;</td>
</tr>
<tr>
<td width=&quot;111&quot;>&nbsp;</td>
</tr>
</table>

Good Luck!

 

[Boomerang]

yeah SS and Sveta,

Your table's are realy less complex than mine, GREAT !!
But beware that it doesn't work in NN4.73 (the only NN I can test). I don't know if it works in other NN versions.

But KingOfSnake, if you choose to code only for IE than you can optimize it with some styles in the <td> to set the width of the inner-borders equal to the outher-border. I used 1.5 as width, because thats looks the best in my browser (IE4.0)
(I took ss's table as example)

good luck,
Erik

<table width=&quot;400&quot; border=&quot;2&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;400&quot; bordercolor=&quot;#000000&quot;>
    <tr>
           	<td style=&quot;border-bottom: solid 1.5pt; border-right: solid 1.5pt&quot; colspan=&quot;2&quot; height=&quot;115&quot;>
           	</td>
           	<td height=&quot;115&quot; width=&quot;250&quot; style=&quot;border-bottom: solid 1.5pt&quot;>  
           	</td>    
    </tr>
    <tr>  
   			<td height=&quot;120&quot; width=&quot;100&quot; style=&quot;border-bottom: solid 1.5pt; border-right: solid 1.5pt&quot;>
   			</td>
   			<td colspan=&quot;2&quot; rowspan=&quot;3&quot;>
   			</td>
    </tr>
    <tr>  
     		<td height=&quot;45&quot; width=&quot;100&quot; style=&quot;border-bottom: solid 1.5pt; border-right: solid 1.5pt&quot;>
     		</td>
    </tr>
    <tr>  
		    <td height=&quot;115&quot; width=&quot;100&quot; style=&quot;border-right: solid 1.5pt&quot;> 
		    </td>
	</tr>
</table>

 

[KingofSnake]

Wow, thanks everyone. I'm going to try to keep this Netscape and IE compatible though.

I think my main problem was figuring out rowspan and how it works (which I still am confused on, but I'm getting it slowly).

Thank you for all the examples.
KingOfSnake - The only sports drink with ice crystals
(and marshmellos!)

 

[KingofSnake]

Alright....I have come across a problem.

I have made a table like I wanted, shown here:

http://www.intotheblood.f2s.com/extra/tt2.html

However, when I add lots of text in the &quot;D&quot; cell, instead of the text wrapping to the next line, the table becomes distorted and loses its width values. You can see an example here:

http://www.intotheblood.f2s.com/extra/tt2b.html

I awlays thought that if you defined the width values in a cell, then the cell would awalys keep that size and shape. But apparently not. Can anyone help me?
KingOfSnake - The only sports drink with ice crystals
(and marshmellos!)