0

伝統的に、私は常に各プロパティをスタイリングしてフォームをレイアウトしますが、最近、テーブルを使用してフォームをスタイリングすることについてよく読んでいます。私の問題は、テーブルでは、1 つのセルがかなり大きい場合、その列の他のすべてのセルが同じ幅になることです。それらを編集するとき、私が最終的に遭遇する問題は、入力フィールドの上に大きなセルが配置されているために入力フィールド間に大きなギャップがあるか、画面のサイズを変更すると、入力フィールドが近づきすぎて快適でなくなることです。

幅を個別に設定しようとしまし<td>たが、うまくいきません。誰かが私を正しい方向に導くことができるかどうかを確認するために、フィドルを作成しました。

よろしくお願いします！

http://jsfiddle.net/uFwkd/

4

2 に答える 2

1

jsfiddle のテーブル (これが実際の問題のようです) には、セル数が異なる行が含まれています。

<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>

<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>

これにより、実際にはかなり予測できないレンダリングが発生します。

すべての行が同じ数のスロット (この場合は 3) を持つようにすることで、構造をより適切にすることができます。これにはcolspan、セルの属性 (上記の最初の行でを使用) を使用します<td colspan="3">。これには、行に対して人為的な決定が必要になります。 2 つのセルを含む: そのうちの 1 つは 2 つの列にまたがる必要があります。

これはやや不自然で (列内のセルは実際には相互に関連しておらず、同じ列に配置されているだけです)、アクセシビリティの問題を意味します。フォームのより優れた表形式の構造は、入力コントロール (1 つの要素などの 1 つのフィールド) ごとに 1 つの行があり、input1 つの列にラベルがあり、別の列にコントロール自体があるため、次のようなものから始めます。

<table>
<tr><td><label for="org">Organization name:</label></td>
    <td><input type="text" name="org" id="org" value="" size="20" /></td>
    </tr>
于 2013-04-12T04:18:41.403 に答える
1

フォームをレイアウトするために div と table を使用することについては議論があります。これについては、いくつかの経験則があります。

  • 展示のみのテーブル
  • フォーム レイアウトとして div を使用する

あなたの場合、テーブルを div に変換することを検討できます。

于 2013-04-12T03:39:36.537 に答える