Table...aligning cells and input boxes

0
votes

I am creating 1 of 3 nested tables within the <form> tag in my HTML document. I inserted input fields to create the text boxes to the right of the text. That all works my only problem is that the following cells: "First Name, Last Name, Address, City, State, Zip Code, and County" are not directly under one another in such a way as to keep the cells aligned and the text boxes aligned. How do I align each section? I hope I am explaining this well if not please ask for further clarification. Any help on this minor problem would be greatly appreciated.

Here's my code so far so you can see what I did:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >

</head>


<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1>

<table width="500" border="0">
    <tr>
        <td align="center"><a href="about.htm">About Us</a></td>
        <td align="center"><a href="mailto:[email protected]">Contact Us</a></td>
        <td align="center"><a href="orderform.htm">Place an Order</a></td>
        <td align="center"><a href="recipe.htm">Sample Recipe</a></td>
    </tr>
</table>

<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
    <tr>
        <td>Personal Information</td>
    </tr>
    <tr>
        <td>First Name:
        <input name="fname" id="fname" size="30" type="text"   />
        </td>
    </tr>
    <tr>
        <td>Last Name:
        <input name="lname" id="lname" size="30" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Address:
        <input name="address" id="address" size="30" type="text"  />
        </td>
    </tr>
    <tr>
        <td>City:
        <input name="city" id="city" size="35" type="text"  />
        </td>
    </tr>
    <tr>
        <td>State:
        <input name="state" id="state" size="3" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Zip Code:
        <input name="zip" id="zip" size="10" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Country:
        <input name="country" id="country" size="10" type="text"  />
        </td>
    </tr>
</table>
</form>
5
htmlnestedhtml-tablealignmentcell
This is not programming related. This question may be better suited to doctype.com - ChrisInEdmonton
@ChrisInEdmonton: Sorry I thought it was since it's dealing with HTML. I will check out the site you mentioned. Thanks for letting me know. - Ashley
I hope you like Doctype! - ChrisInEdmonton
@ChrisInEdmonton There are 12038 questions tagged as HTML on SO. I am betting quite a few of them are about layout. - Sinan Ünür
@Ashley You need to decide if you are going to write XHTML or HTML (and find out the differences between them). As I am not that smart, I find it easier to stick with HTML and use a <!DOCTYPE HTML> to trigger standards compliant mode (see dustindiaz.com/skinny-on-doctypes ) As for your form layout, make sure that labels for form inputs are labeled as <label>s. Nested tables seem straightforward at first but get really nasty quick. See alistapart.com/articles/prettyaccessibleforms for help. - Sinan Ünür

5 Answers

4
votes

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.

1
votes

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.

1
votes

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

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.

0
votes

One easy option might be using flex style in table cell

<td style="display:flex">
  <label>Flex</label>
  <input type="text">
  <input type="text">
</td>

It will show all elements in one row as long as there is enough space.