Таблица ... выравнивание ячеек и полей ввода - PullRequest
Новая
       36

Таблица ... выравнивание ячеек и полей ввода

0 голосов
/ 03 февраля 2010

Я создаю 1 из 3 вложенных таблиц в теге <form> в моем HTML-документе. Я вставил поля ввода, чтобы создать текстовые поля справа от текста. Это все работает, моя единственная проблема в том, что следующие ячейки: «Имя, Фамилия, Адрес, Город, Штат, Почтовый индекс и Округ» не находятся под друг другом таким образом, чтобы держать ячейки выровненными и текст коробки выровнены. Как выровнять каждый раздел? Я надеюсь, что объясню это хорошо, если нет, пожалуйста, попросите дальнейших разъяснений. Любая помощь по этой незначительной проблеме будет принята с благодарностью.

Вот мой код, чтобы вы могли видеть, что я сделал: 

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

Ответы [ 4 ]

4 голосов
/ 03 февраля 2010

Просто поместите поля ввода в другую ячейку следующим образом: 

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

Если вы сделаете все свои строки такими, тогда метки и поля ввода будут выровнены.

1 голос
/ 04 февраля 2010

Ниже приведен пример отделения контента от представления. У вас есть два основных компонента на странице: меню навигации (которое представляет собой список ссылок) и контактная форма (которая состоит из списка элементов формы). HTML-код сам по себе и будет отображаться разумно даже без какого-либо стиля.

Во-первых, стили сбрасываются с помощью Таблица стилей сброса Yahoo! , чтобы обеспечить одинаковую начальную точку независимо от настроек браузера. Затем конкретные стили применяются до тех пор, пока итоговое отображение не будет соответствовать требованиям. 

<!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>
1 голос
/ 03 февраля 2010

Я разместил ответ на ваш вопрос в Doctype: http://doctype.com/create-nested-table-html. Вы действительно должны использовать DIV и CSS вместо таблиц и встроенных стилей для разработки веб-сайтов.

0 голосов
/ 03 февраля 2010

Просто поместите input s в td s своих: 

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

и т. Д.

...