make last row of table take up remainder of page

J

jason

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

rf

jason said:
i want my table to stretch all the way to the bottom of my website.
Click to expand...

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

tr></table></center>

</body>
</html>
Click to expand...

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

dorayme

<[email protected]
m>,
jason said:
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>
Click to expand...


Try adding in the head of the doc:

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

Andy

jason said:
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>
Click to expand...


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
 
R

Roy A.

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%"
Click to expand...

"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."
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%">
Click to expand...

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

dorayme

<[email protected]
m>,

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

Roy A.

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




"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>
Click to expand...

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

Roy A.

<[email protected]
m>,


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>
Click to expand...

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

dorayme

<[email protected]
m>,
"Roy A. said:
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.
Click to expand...

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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
SendGrid email issue in responsive Gmail 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Can anyone please help? HTML - two tables applying different styles 4
Filter table rows based on multiple checkboxes value 2
I need help fixing my website 2
Javascript DOM 1
Only one table shows up with the information 2

Members online

Total: 22 (members: 2, guests: 20)
Robots: 302

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top