dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Dynamic column width in tables

  1. #1
    Join Date
    Mar 2006
    Posts
    3

    Dynamic column width in tables

    Hi,

    I have a series of tables on a page which have a text label on the left and a form input (could be any of text, checkbox, drop down) and the behaviour I would like is:

    - The width of the left column is dictated by the text in that column, i.e. it will expand as wide as it can before hitting the form input to fit the text, or will wrap tightly around the text if there is very little.

    Using nowrap and setting the left column width to a low percentage almost works, but pushes the form inputs off the page.

  2. #2
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    If what you want is perfectly aligned labels/inputs then look at this article and scroll down to FORM(s) and Function.

    While you're there, note why tables for layout are not recomended.

  3. #3
    Join Date
    Mar 2006
    Posts
    3
    Cool, cheers.

    So how exactly do I achieve my desired result using CSS?

  4. #4
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    If you what you want really isn't what was in that article then the only thing that I can think of is a not particuarly graceful solution, that doesn't work in IE.
    But I'm srue your sollution is around.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Form</title>
    <style type="text/css">
    div#labels,div#inputs{
    float: left;
    }
    div#labels label, div#inputs input{
    height: 25px;
    display: block;
    }
    * html div#labels label{
    width: 150px;
    }
    
    </style>
    
    </head>
    <body>
    <form action="login.php" method="post" id="loginform">
    <div id="labels">
    <label for="name">Your name:</label>
    <label for="email">Your e-mail address:</label>
    <label for="pass">Your password:</label>
    </div>
    <div id="inputs">
    <input type="text" id="name">
    <input type="text" id="email">
    <input type="password" id="pass">
    </div>
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Mar 2006
    Posts
    3
    does that no make the labels column a fixed width of 150px?

  6. #6
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    Only in Internet Explorer. Modern browsers ignore "* html" because it implies "html when it is contained by any other element" which it isn't, but IE doesn't understand this.
    Take out those line and you'll see the even bigger mess that IE makes.

  7. #7
    Join Date
    Mar 2006
    Posts
    7
    Hello all!

    I've been reading the articles in the links above about using CSS and margins to replace a lot of table usage. They still say to use tables sometimes, and the examples of good design that I looked at still had moderate table usage to layout the content.

    The trick is, how do I know when I'm using tables excessively?

    I know basic HTML and I'm revamping this website http://www.ntf.com.au ... if you look at some of the inside pages the entire content is laid out in tables and there is only about 5 lines in the CSS they use.

    What should i be avoiding when it comes to tables and still be able to give the pages a well branded look and feel?

    Your patients is appreciated!

    Felix
    =)

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Basically, if the content you're marking up is tabular data then that's where you use a table. For page layout you should always use CSS.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles