4thorder(TM) - Code Snippets and Full Scripts

Special Table Layout

Note: I am adding this one out of interest. It isn't a very difficult question but surprisingly it took a little time to get it right.

Question:

I know this must sound really simple.
What I want to do is have a table with 3 rows. I want the width and height set to 100%
row1: overall height 20%
1st column widths 25% 2nd col. 50% 3rd col. 25%
row2: overall height 50%
two columns width *50%
Row 3: overall height 30%
1 column width 100%
it may be easier to understand if i illustrate it:
----------------
I.....I........I..... I ROW1
----------------
...........I
...........I ROW2
...........I
----------------
I.....................I ROW3
----------------
it may help to look at the picture I've attached

TABLE.gif (5.8 KB, 3 views)

I have been trying all weekend to do this but i cant seem to get it to work using percentages.

Answer:

The only way that I can see to do this without getting real fancy with code is with 4 tables

1 main table with three rows with each row having a table.

Collapse all borders on all tables. I set the percentages the way they needed to be for all 4 tables to get the correct effect.

CLICK HERE FOR DEMO

Keep changing size of window to see that indeed the percentages are represented.

The demo has borders and information in them. I stripped those out and now here is the code:

Code:

<HTML>
<HEAD>
</HEAD>
<BODY topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" >
<TABLE border="0" cellpadding="0" width="100%" height="100%" style="border-collapse: collapse">
<TR>
<TD height="20%">
<TABLE border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%">
<TR>
	<TD width="25%" height="100%" align="center">&nbsp;</TD>
	<TD width="50%" height="100%" align="center">&nbsp;</TD>
	<TD width="25%" height="100%" align="center">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD height="50%">
<TABLE border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%">
<TR>
	<TD width="50%" height="100%" align="center">&nbsp;</TD>
	<TD width="50%" height="100%" align="center">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD height="30%">
<TABLE border="0" cellpadding="0" style="border-collapse: collapse" width="100%" height="100%">
<TR>
	<TD height="100%" align="center">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Top of Page