ansaurus

Question

Need help with table...aligning cells and input boxes

Answer 1

+4 A:

Just put the input boxes in another cell like this:

<tr>
    <td>First Name:</td>
    <td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>

If you make all your rows like that, then the labels and input boxes will line up.

Tatu Ulmanen 2010-02-03 18:55:30

@Tatu Ulmanen: I tried this and it made both the labels and the text boxes line up individually which is what I was trying to do- so thank you! But now there is a lot of space between them? I tried resizing my window and I think it's because my screen is wide so I think it will correct itself depending on the size of the viewer's screen. What do you think?

Ashley 2010-02-03 19:12:35

@Ashley, by default, tables have a width of 100%, so the table stretches from left edge to the right edge of the window. And browsers usually split the cells 50/50, that's why there's a large gap. Set `width: auto;` to the table so it will take up only the space that is necessary. You can add `padding` to table cells to fine tune the gap.

Tatu Ulmanen 2010-02-03 19:27:07

@Tatu Ulmanen: Thanks for your help. That did work unfortunately I have to set it to 65% so it's going to have to do like it is I guess. Thanks anyway.

Ashley 2010-02-03 20:04:52

@Ashley, you can specify a width for the left column (the labels). In the first td of the first row, put a `style="width: 100px;"` etc. and it should work.

Tatu Ulmanen 2010-02-03 21:06:44

Answer 2

A:

Simply put the inputs into tds of their own:

<tr>
    <td>First Name:</td>
    <td><input name="fname" id="fname" size="30" type="text"   /></td>
</tr>
<tr>
    <td>Last Name:</td>
    <td><input name="lname" id="lname" size="30" type="text"  /></td>
</tr>
<tr>
    <td>Address:</td>
    <td><input name="address" id="address" size="30" type="text"  /></td>
</tr>

And so on.

RegDwight 2010-02-03 18:58:13

@RegDwight: thanks!

Ashley 2010-02-03 19:14:09

Answer 3

+1 A:

I posted an answer to your question over at Doctype: http://doctype.com/create-nested-table-html. You should really look into using DIV's & CSS instead of Tables and Inline Styling for designing websites.

Styledev 2010-02-03 20:53:19

Answer 4

A:

This should really be a comment but my comment above had already gotten very long. Because of the space and layout constraints of the comment box, it is hard to give a reasonable example of what is better than what you are doing at the moment.

The following is an example of separating content from presentation. You have two main components on the page: A navigation menu (which is a list of links) and a contact form (which consists of a list of form elements). The HTML stands on its own and would display reasonably even without any styling.

First, styles are reset using Yahoo!'s reset stylesheet to ensure that the starting point is the same regardless of browser-specific defaults. Then, specific styles are applied until the resulting display reasonably matches the requirements.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"&gt;
<style type="text/css">
    html { background:#eef; font-size:18px;}
    body { background:#eee; margin:0 auto; width:95%;}
    #main { clear:both; }
    #hmenu { background:#fed; height:2em }
    #hmenu li { 
        background:#fed;
        display:block; 
        float:left; 
        padding:0 4px;
        border-left:solid 4px #dcb;
    }
    #hmenu a { 
        display:block; 
        font-family:sans-serif;
        font-size:1.5em;
        font-weight:bold;
        line-height:1.3333;
        text-decoration:none; 
    }
    form { padding:1em 0; }
    fieldset { 
        background:#fff; 
        border:solid 1px #222;
        padding:0.5em 0;
        margin:0 auto;
        width:90%; 
    }
    legend { 
        background:#eee;
        padding:0.1667em;
    }
    form li { 
        clear:both; 
        display:block;
        padding:1em 0;
    }
    form li label { 
        display:block; 
        float:left; 
        font-family:sans-serif;
        font-weight:bold;
        padding:0 0.25em 0 0;
        text-align:right; 
        width:35%; 
    }
    form li input[type="text"] { 
        display:block; 
        float:left; 
    }
    form input[type="submit"] {
        margin:0 0 0 35%;
    }
</style>

<title>Contact Form</title>

</head>

<body>

<div id="hmenu">
<ul>
<li><a href="about.htm">About Us</a></li>
<li><a href="mailto:[email protected]">Contact Us</a></li>
<li><a href="orderform.htm">Place an Order</a></li>
<li><a href="recipe.htm">Sample Recipe</a></li>
</ul>
</div>

<div id="main">
<form name="web-order-form" id="web-order-form">
    <fieldset>
        <legend>Personal Information</legend>
        <ul>

            <li><label for="fname">First Name: </label>
            <input name="fname" id="fname" size="30" type="text"></li>

            <li><label for="lname">Last Name: </label>
            <input name="lname" id="lname" size="30" type="text"></li>

            <li><label for="address">Address: </label>
            <input name="address" id="address" size="30"
            type="text"></li>

            <li><label for="city">City: </label>
            <input name="city" id="city" size="35" type="text"></li>

            <li><label for="state">State: </label>
            <input name="state" id="state" size="3" type="text"></li>

            <li><label for="zip">Zip Code: </label>
            <input name="zip" id="zip" size="10" type="text"></li>

            <li><label for="country">Country: </label>
            <input name="country" id="country" size="10"
            type="text"></li>

            <li><input type="submit" name="submit-order" id="submit-order"
            value="Place Order"></li>
        </ul>
    </fieldset>
</form>
</div>
</body>
</html>

Sinan Ünür 2010-02-03 22:02:29

ansaurus

tags:

views:

answers:

Need help with table...aligning cells and input boxes

related questions