Question

我正在HTML文档的<form>标记中创建3个嵌套表中的1个。我插入输入字段以创建文本右侧的文本框。这一切都有效我唯一的问题是以下单元格：“名字，姓氏，地址，城市，州，邮政编码和县”并不是直接在彼此之下，以保持单元格对齐和文本盒子对齐。如何对齐每个部分？我希望我能解释得很好，如果没有请求进一步澄清。任何有关这个小问题的帮助将不胜感激。

到目前为止，这是我的代码所以你可以看到我做了什么：

<?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:cookiemaster@example.com">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>

Answer 1

只需将输入框放在另一个单元格中：

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

如果你把所有的行都这样，那么标签和输入框就会排成一行。

Answer 2

我在Doctype上发布了您的问题的答案：http://doctype.com/create-nested-table-html。你应该真正考虑使用DIV＆amp;用于设计网站的CSS而不是Tables和Inline Styling。

Answer 3

以下是将内容与演示文稿分开的示例。页面上有两个主要组件：导航菜单（链接列表）和联系表单（由表单元素列表组成）。 HTML独立存在，即使没有任何样式也能合理显示。

首先，使用Yahoo!'s reset stylesheet重置样式，以确保起始点相同，而不管浏览器特定的默认值。然后，应用特定样式，直到结果显示符合要求。

<!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:cookiemaster@example.com">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>

Answer 4

只需将input s放入自己的td：

<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>

等等。

表...对齐单元格和输入框

4 个答案: