Announcement

Collapse
No announcement yet.

Hand-holding: table height & column width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Scootertaj
    replied
    Some things are made for tables, such as tabular data (spread sheets, stats, etc.), but I would go with a non-table version as you said you were working on

    Leave a comment:


  • mdevour
    replied
    Dear Scootertaj,

    Thank you!

    The one thing I would never have thought to try is to give the <html> tag a style definition with height and width! It works very well in firefox, some differences in IE6.

    Talking about "cleaning up" my code, I've started working on a no-tables version which seems to be working pretty well so far.

    It's so tough to do the basics, layout-wise, I'm pretty amazed.

    Be well,

    Mike D.

    Leave a comment:


  • Scootertaj
    replied
    Here's some code that seems to work in IE and FF.
    Didn't test the width: 150px blurb you had at the end, but should work.
    Also, tidied up your code a little, but not all the way.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head> 
    <title>test document</title> 
    <style type="text/css">
    html {
    height: 100%;
    width: 100%;
    }
    table
    {
    border: 2px solid red;
    width: 100%;
    height: 100%;
    }
    td
    {
    border: 2px solid red;
    }
    </style>
    </head> 
    <body style="height: 100%;"> 
     
    <table cellspacing="0" height="100%">
    <th rowspan="3" style="width: 150px; font-family: sans-serif;">
      <p>left column</p>
      <td height="120px"><p>header</p></td>
    </th>
    <tr><td height="100%"><p>main</p></td></tr>
    <tr><td height="80px"><p>footer</p></td></tr>
    </table>
     
    </body> 
    </html>

    Leave a comment:


  • mdevour
    started a topic Hand-holding: table height & column width

    Hand-holding: table height & column width

    I'm climbing several learning curves here: (x)html, css, php, vBulletin... Today it's HTML that I'm beating my head against.

    I have written the code below. I'm viewing it both in Firefox under Linux and in IE6 on an old Windows 98 machine.

    I have tried several ways to get the table to completely fill the height of the browser window, but nowhere have I found the magic place to put a height="100%" or a height: 100%; that works. I want the "header" and "footer" to be of fixed height, and the "main" area to expand to whatever height is necessary to fill out the table.

    Later I'd like to add a overflow: auto; or scroll; attribute to the "main" cell of the table.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html> 
    <head> 
    
    <title>test document</title> 
    
    <style type="text/css">
    table
    {
    border: 2px solid red;
    width: 100%;
    }
    td
    {
    border: 2px solid red;
    }
    </style>
    
    </head> 
    
    <body style="margin: 0 0 0 0;"> 
     
    <table rules="all" cellspacing="0" height="100%">
    
    <th rowspan="3" style="width: 150px; font-family: sans-serif;">
      <p>left column</p>
      <td height="120px"><p>header</p></td>
    </th>
    
    <tr><td height="100%"><p>main</p></td></tr>
    <tr><td height="80px"><p>footer</p></td></tr>
    
    </table>
     
    </body> 
    </html>
    Secondly, and I guess it's pretty hard to do this, but I'd like to make the left hand column of the table be absolutely, positively, fixed at a single width of, say 150px. I've yet to find any way to do this that doesn't break down the instant the browser window starts to get too narrow for everything to fit easily. First the whitespace goes away, then the words wrap.

    How do I do these things? Or are they impossible?

    Thanks,

    Mike D.

Related Topics

Collapse

Working...
X