make last row of table take up remainder of page

02-25-2010

i want my table to stretch all the way to the bottom of my website.

is there a way to do this?
below is my code.

<html>
<header>
<link rel="stylesheet" type="text/css" href="styles.css" />
</header>

<body style="margin:0px;">

<center>
<table border="0" cellpadding="0" width=35% margin:0px
bgcolor=#FFFFFF><tr><th colspan="4" align="center"><a href="http://
www.henofthewoods.org/store/"><img border="0" src="/images/
logo_small_transparent.jpg"></a></th></tr>
<tr><th><a href="">link1</a></th><th><a href="">link1</a></th><th><a
href="">link1</a></th><th><a href="">link1</a></th>
<tr><th colspan="2" align="left">TITLE</th><th style="height:100%!
important" colspan="2" align="right">2010-02-25</th></tr><tr><th
colspan="4" align="left">what is going on here? hmm</tr><tr><th
colspan="4" align="left"></th></tr><tr><th colspan="4"
align="center"><hr size="1" color="#C56C12" width="100%"/></th></
tr><tr><th colspan="2" align="left"><a href="#">◄Previous</a></
th><th colspan="2" align="right"><a href="#">NEXT►</a></th></
tr></table></center>

</body>
</html>

02-25-2010

jason wrote:
> i want my table to stretch all the way to the bottom of my website.

Define your version of "the bottom of my website".

<snip code>

> tr></table></center>
>
> </body>
> </html>

Your table is already at the bottom of the page. there is nothing between
the end of the table and the end of the page.

02-25-2010

In article
<0072ad10-fcb6-4ab2-9076-
m>,
jason <> wrote:

> i want my table to stretch all the way to the bottom of my website.
>
> is there a way to do this?
> below is my code.
>
> <html>
> <header>
> <link rel="stylesheet" type="text/css" href="styles.css" />
> </header>
>
> <body style="margin:0px;">
>
> <center>
> <table border="0" cellpadding="0" width=35% margin:0px
> bgcolor=#FFFFFF><tr><th colspan="4" align="center"><a href="http://
> www.henofthewoods.org/store/"><img border="0" src="/images/
> logo_small_transparent.jpg"></a></th></tr>
> <tr><th><a href="">link1</a></th><th><a href="">link1</a></th><th><a
> href="">link1</a></th><th><a href="">link1</a></th>
> <tr><th colspan="2" align="left">TITLE</th><th style="height:100%!
> important" colspan="2" align="right">2010-02-25</th></tr><tr><th
> colspan="4" align="left">what is going on here? hmm</tr><tr><th
> colspan="4" align="left"></th></tr><tr><th colspan="4"
> align="center"><hr size="1" color="#C56C12" width="100%"/></th></
> tr><tr><th colspan="2" align="left"><a href="#">◄Previous</a></
> th><th colspan="2" align="right"><a href="#">NEXT►</a></th></
> tr></table></center>
>
> </body>
> </html>

Try adding in the head of the doc:

<style type="text/css" media="all">
html, body, table {height: 100%;}
</style>

--
dorayme

02-26-2010

"jason" <> wrote in message
news:0072ad10-fcb6-4ab2-9076-...
> i want my table to stretch all the way to the bottom of my website.
>
> is there a way to do this?
> below is my code.
>
> <html>
> <header>
> <link rel="stylesheet" type="text/css" href="styles.css" />
> </header>
>
> <body style="margin:0px;">
>
> <center>
> <table border="0" cellpadding="0" width=35% margin:0px
> bgcolor=#FFFFFF><tr><th colspan="4" align="center"><a href="http://
> www.henofthewoods.org/store/"><img border="0" src="/images/
> logo_small_transparent.jpg"></a></th></tr>
> <tr><th><a href="">link1</a></th><th><a href="">link1</a></th><th><a
> href="">link1</a></th><th><a href="">link1</a></th>
> <tr><th colspan="2" align="left">TITLE</th><th style="height:100%!
> important" colspan="2" align="right">2010-02-25</th></tr><tr><th
> colspan="4" align="left">what is going on here? hmm</tr><tr><th
> colspan="4" align="left"></th></tr><tr><th colspan="4"
> align="center"><hr size="1" color="#C56C12" width="100%"/></th></
> tr><tr><th colspan="2" align="left"><a href="#">◄Previous</a></
> th><th colspan="2" align="right"><a href="#">NEXT►</a></th></
> tr></table></center>
>
> </body>
> </html>

Not entirely sure what you're after, but have a look at this...

<html>
<header>
<link rel="stylesheet" type="text/css" href="styles.css" />
</header>

<body style="margin:0px;">

<center>
<table border="0" cellpadding="0" width="35%" height="100%"
style="margin:0px; bgcolor: #FFFFFF">
<tr>
<th colspan="4" align="center"><a
href="http://www.henofthewoods.org/store/"><img border="0"
src="/images/logo_small_transparent.jpg"></a></th>
</tr>
<tr>
<th><a href="">link1</a></th>
<th><a href="">link1</a></th>
<th><a href="">link1</a></th>
<th><a href="">link1</a></th>
</tr>
<tr>
<th colspan="2" align="left">TITLE</th>
<th colspan="2" align="right">2010-02-25</th>
</tr>
<tr height="100%">
<th colspan="4" align="left" valign="top">what is going on here? hmm. This
row now stretches to fill the screen.</th>
</tr>
<tr>
<th colspan="4" align="left"></th>
</tr>
<tr>
<th colspan="4" align="center"><hr size="1" color="#C56C12"
width="100%"/></th>
</tr>
<tr>
<th colspan="2" align="left"><a href="#">◄Previous</a></th>
<th colspan="2" align="right"><a href="#">NEXT►</a></th>
</tr>
</table>
</center>

</body>
</html>

Hope this helps

Andy

02-26-2010

On 26 Feb, 11:26, "Andy" <a...@NOSPAMmanyplay.com> wrote:
> "jason" <jason.mell...@gmail.com> wrote in message
>
> news:0072ad10-fcb6-4ab2-9076-...
>
>
>
>
>
> > i want my table to stretch all the way to the bottom of my website.
>
> > is there a way to do this?
> > below is my code.
>
> > <html>
> > <header>
> > <link rel="stylesheet" type="text/css" href="styles.css" />
> > </header>
>
> > <body style="margin:0px;">
>
> > <center>
> > <table border="0" cellpadding="0" width=35% margin:0px
> > bgcolor=#FFFFFF><tr><th colspan="4" align="center"><a href="http://
> >www.henofthewoods.org/store/"><img border="0" src="/images/
> > logo_small_transparent.jpg"></a></th></tr>
> > <tr><th><a href="">link1</a></th><th><a href="">link1</a></th><th><a
> > href="">link1</a></th><th><a href="">link1</a></th>
> > <tr><th colspan="2" align="left">TITLE</th><th style="height:100%!
> > important" colspan="2" align="right">2010-02-25</th></tr><tr><th
> > colspan="4" align="left">what is going on here? hmm</tr><tr><th
> > colspan="4" align="left"></th></tr><tr><th colspan="4"
> > align="center"><hr size="1" color="#C56C12" width="100%"/></th></
> > tr><tr><th colspan="2" align="left"><a href="#">◄Previous</a></
> > th><th colspan="2" align="right"><a href="#">NEXT►</a></th></
> > tr></table></center>
>
> > </body>
> > </html>
>
> Not entirely sure what you're after, but have a look at this...
>
> <html>
> <header>
> <link rel="stylesheet" type="text/css" href="styles.css" />
> </header>
>
> <body style="margin:0px;">
>
> <center>
> <table border="0" cellpadding="0" width="35%" height="100%"

"CSS 2.1 does not define how extra space is distributed when the
'height' property causes the table to be taller than it otherwise
would be."
<http://www.w3.org/TR/CSS2/tables.html#height-layout>

> style="margin:0px; bgcolor: #FFFFFF">
> <tr>
> <th colspan="4" align="center"><a
> href="http://www.henofthewoods.org/store/"><img border="0"
> src="/images/logo_small_transparent.jpg"></a></th>
> </tr>
> <tr>
> <th><a href="">link1</a></th>
> <th><a href="">link1</a></th>
> <th><a href="">link1</a></th>
> <th><a href="">link1</a></th>
> </tr>
> <tr>
> <th colspan="2" align="left">TITLE</th>
> <th colspan="2" align="right">2010-02-25</th>
> </tr>
> <tr height="100%">

"CSS 2.1 does not define how the height of table cells and table rows
is calculated when their height is specified using percentage values."
<http://www.w3.org/TR/CSS2/tables.html#height-layout>

02-26-2010

In article
<8f6288d3-944c-418d-b532-
m>,
"Roy A." <> wrote:

> On 26 Feb, 11:26, "Andy" <a...@NOSPAMmanyplay.com> wrote:
> > "jason" <jason.mell...@gmail.com> wrote in message
> >

Was my brief suggestion earlier in the thread no good? A little
cockroach to be squashed and ignored by following long posts by
Andy and now this? <g>

--
dorayme

02-26-2010

On 26 Feb, 22:19, "Roy A." <royarnes...@gmail.com> wrote:
> On 26 Feb, 11:26, "Andy" <a...@NOSPAMmanyplay.com> wrote:
>
>
>
>
>
> > "jason" <jason.mell...@gmail.com> wrote in message
>
> >news:0072ad10-fcb6-4ab2-9076-...
>
> > > i want my table to stretch all the way to the bottom of my website.
>
> > > is there a way to do this?
> > > below is my code.
>
> > > <html>
> > > <header>
> > > <link rel="stylesheet" type="text/css" href="styles.css" />
> > > </header>
>
> > > <body style="margin:0px;">
>
> > > <center>
> > > <table border="0" cellpadding="0" width=35% margin:0px
> > > bgcolor=#FFFFFF><tr><th colspan="4" align="center"><a href="http://
> > >www.henofthewoods.org/store/"><img border="0" src="/images/
> > > logo_small_transparent.jpg"></a></th></tr>
> > > <tr><th><a href="">link1</a></th><th><a href="">link1</a></th><th><a
> > > href="">link1</a></th><th><a href="">link1</a></th>
> > > <tr><th colspan="2" align="left">TITLE</th><th style="height:100%!
> > > important" colspan="2" align="right">2010-02-25</th></tr><tr><th
> > > colspan="4" align="left">what is going on here? hmm</tr><tr><th
> > > colspan="4" align="left"></th></tr><tr><th colspan="4"
> > > align="center"><hr size="1" color="#C56C12" width="100%"/></th></
> > > tr><tr><th colspan="2" align="left"><a href="#">◄Previous</a></
> > > th><th colspan="2" align="right"><a href="#">NEXT►</a></th></
> > > tr></table></center>
>
> > > </body>
> > > </html>
>
> > Not entirely sure what you're after, but have a look at this...
>
> > <html>
> > <header>
> > <link rel="stylesheet" type="text/css" href="styles.css" />
> > </header>
>
> > <body style="margin:0px;">
>
> > <center>
> > <table border="0" cellpadding="0" width="35%" height="100%"
>
> "CSS 2.1 does not define how extra space is distributed when the
> 'height' property causes the table to be taller than it otherwise
> would be."
> <http://www.w3.org/TR/CSS2/tables.html#height-layout>
>
>
>
> > style="margin:0px; bgcolor: #FFFFFF">
> > <tr>
> > <th colspan="4" align="center"><a
> > href="http://www.henofthewoods.org/store/"><img border="0"
> > src="/images/logo_small_transparent.jpg"></a></th>
> > </tr>
> > <tr>
> > <th><a href="">link1</a></th>
> > <th><a href="">link1</a></th>
> > <th><a href="">link1</a></th>
> > <th><a href="">link1</a></th>
> > </tr>
> > <tr>
> > <th colspan="2" align="left">TITLE</th>
> > <th colspan="2" align="right">2010-02-25</th>
> > </tr>
> > <tr height="100%">
>
> "CSS 2.1 does not define how the height of table cells and table rows
> is calculated when their height is specified using percentage values."
> <http://www.w3.org/TR/CSS2/tables.html#height-layout>

The example only works in quirks mode. You should always use standards
mode by using a proper doctype like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

if you are afraid of slashes, or think your page will load faster
without.

02-26-2010

On 26 Feb, 22:28, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <8f6288d3-944c-418d-b532-a6925c087...@k34g2000yqh.googlegroups.co
> m>,
> *"Roy A." <royarnes...@gmail.com> wrote:
>
> > On 26 Feb, 11:26, "Andy" <a...@NOSPAMmanyplay.com> wrote:
> > > "jason" <jason.mell...@gmail.com> wrote in message
>
> Was my brief suggestion earlier in the thread no good? A little
> cockroach to be squashed and ignored by following long posts by
> Andy and now this? <g>

There is a difference in the table height algorithm from CSS 2 to CSS
2.1.

In CSS 2 you your solution works, but not with CSS 2.1. It dosn't work
in Firefox 3.5.8 for linux. I don't know about Windows or Mac.

02-27-2010

In article
<017ed27b-523b-4fc2-b931-
m>,
"Roy A." <> wrote:

> On 26 Feb, 22:28, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <8f6288d3-944c-418d-b532-a6925c087...@k34g2000yqh.googlegroups.co
> > m>,
> > *"Roy A." <royarnes...@gmail.com> wrote:
> >
> > > On 26 Feb, 11:26, "Andy" <a...@NOSPAMmanyplay.com> wrote:
> > > > "jason" <jason.mell...@gmail.com> wrote in message
> >
> > Was my brief suggestion earlier in the thread no good? A little
> > cockroach to be squashed and ignored by following long posts by
> > Andy and now this? <g>
>
> There is a difference in the table height algorithm from CSS 2 to CSS
> 2.1.
>
> In CSS 2 you your solution works, but not with CSS 2.1. It dosn't work
> in Firefox 3.5.8 for linux. I don't know about Windows or Mac.

You did not warn people who might be fooled by my foolish
mistakes! There are people who are easily misled. It is your duty.

<http://dorayme.netweaver.com.au/tablehigh.html>

So, you are seeing what I am not seeing in any of my Mac
browsers, the FF version you mention, many of the other browsers,
some the latest, some decrepit like Mac IE5, and just a minute,
let me turn on my winbox. Yes, same in IE7 and 6. So, FF on Linux
has not caught up with 2.1?

--
dorayme

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
row bottom border in inner table not matching up with row border in outer table	phl	HTML	1	06-08-2006 03:43 PM
ok I can do a totals row but how about a percentage row after each data row	D	ASP .Net Datagrid Control	0	05-23-2005 04:10 PM
Table Column Width - Setting as remainder of page	=?Utf-8?B?Sm9obiBCYW5raGVhZA==?=	ASP .Net	0	03-24-2005 02:57 PM
Can center row in three row table take up remaining space?	Anon	HTML	2	03-18-2005 08:35 AM
polynomial division remainder	Manfred Balik	VHDL	5	05-18-2004 02:37 AM