make last row of table take up remainder of page

Discussion in 'HTML' started by jason, Feb 25, 2010.

  1. jason

    jason Guest

    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>
     
    jason, Feb 25, 2010
    #1
    1. Advertising

  2. jason

    rf Guest

    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.
     
    rf, Feb 25, 2010
    #2
    1. Advertising

  3. jason

    dorayme Guest

    In article
    <
    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
     
    dorayme, Feb 25, 2010
    #3
  4. jason

    Andy Guest

    "jason" <> wrote in message
    news:...
    > 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
     
    Andy, Feb 26, 2010
    #4
  5. jason

    Roy A. Guest

    On 26 Feb, 11:26, "Andy" <> wrote:
    > "jason" <> wrote in message
    >
    > news:...
    >
    >
    >
    >
    >
    > > 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>
     
    Roy A., Feb 26, 2010
    #5
  6. jason

    dorayme Guest

    In article
    <
    m>,
    "Roy A." <> wrote:

    > On 26 Feb, 11:26, "Andy" <> wrote:
    > > "jason" <> 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
     
    dorayme, Feb 26, 2010
    #6
  7. jason

    Roy A. Guest

    On 26 Feb, 22:19, "Roy A." <> wrote:
    > On 26 Feb, 11:26, "Andy" <> wrote:
    >
    >
    >
    >
    >
    > > "jason" <> wrote in message

    >
    > >news:...

    >
    > > > 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.
     
    Roy A., Feb 26, 2010
    #7
  8. jason

    Roy A. Guest

    On 26 Feb, 22:28, dorayme <> wrote:
    > In article
    > <
    > m>,
    >  "Roy A." <> wrote:
    >
    > > On 26 Feb, 11:26, "Andy" <> wrote:
    > > > "jason" <> 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.
     
    Roy A., Feb 26, 2010
    #8
  9. jason

    dorayme Guest

    In article
    <
    m>,
    "Roy A." <> wrote:

    > On 26 Feb, 22:28, dorayme <> wrote:
    > > In article
    > > <
    > > m>,
    > >  "Roy A." <> wrote:
    > >
    > > > On 26 Feb, 11:26, "Andy" <> wrote:
    > > > > "jason" <> 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
     
    dorayme, Feb 27, 2010
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Manfred Balik

    polynomial division remainder

    Manfred Balik, May 12, 2004, in forum: VHDL
    Replies:
    5
    Views:
    3,341
    Mike Treseler
    May 18, 2004
  2. John Saunders

    Re: Remainder

    John Saunders, Jun 28, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    412
    John Saunders
    Jun 28, 2004
  3. =?Utf-8?B?Sm9obiBCYW5raGVhZA==?=

    Table Column Width - Setting as remainder of page

    =?Utf-8?B?Sm9obiBCYW5raGVhZA==?=, Mar 24, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    501
    =?Utf-8?B?Sm9obiBCYW5raGVhZA==?=
    Mar 24, 2005
  4. Anon
    Replies:
    2
    Views:
    948
    Jukka K. Korpela
    Mar 18, 2005
  5. phl
    Replies:
    1
    Views:
    4,375
    Martin Jay
    Jun 8, 2006
Loading...

Share This Page