0

<form>HTML ドキュメントの タグ内に 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>
4

5 に答える 5

4

次のように、入力ボックスを別のセルに配置するだけです。

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

すべての行をそのようにすると、ラベルと入力ボックスが整列します。

于 2010-02-03T18:55:30.853 に答える
1

あなたの質問に対する回答を Doctype: http://doctype.com/create-nested-table-htmlに投稿しました。Web サイトの設計には、テーブルとインライン スタイリングの代わりに DIV と CSS を使用することを検討する必要があります。

于 2010-02-03T20:53:19.493 に答える
1

以下は、プレゼンテーションからコンテンツを分離する例です。ページには、ナビゲーション メニュー (リンクのリスト) と連絡先フォーム (フォーム要素のリストで構成される) の 2 つの主要なコンポーネントがあります。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>
于 2010-02-03T22:02:29.053 に答える
0

s を独自のinputs に入れるだけです。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>

等々。

于 2010-02-03T18:58:13.503 に答える