12

[メタノート:] 私は質問ページを閲覧していて、「DIVS vs Tables」「いつテーブル vs DIVS を使うべきか」「Divs は Tables よりも優れているか」「Tables vs CSS」と同じことを尋ねるすべての質問に本当にうんざりしていましたTHING OMG PEOPLEですが、「なぜテーブルをあきらめて使用する必要があるのか​​」という標準的な例の翻訳に人々が取り組むすべての方法を見たいと思います。

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

質問:テーブルを使用せずに上記を最適に (意味的に、単純に、堅牢に、流動的に、移植可能に) 実装するにはどうすればよいですか。まず第一に、単純な実装では最初の列に固定の列幅を使用していると思いますが、動的に生成されたコンテンツに対しては不確かな結果になる可能性があります。回答にアプローチの長所/短所を含めるとよいでしょう。

PS私がよく疑問に思っているもう1つのことは、垂直方向のセンタリングですが、そのハックはjakpsatweb.czでかなりよくカバーされています

編集: scunlife は、私が問題を慎重に考え出さなかった理由の良い例をもたらします。テーブルは複数の列を同時に整列できます。質問はまだ残っています (配置/レイアウトに使用されるさまざまな CSS 手法を見たいと思います) - 彼を処理できるソリューションはありますか? より複雑な例は間違いなく優先されます。

4

5 に答える 5

11

私が通常行うことは次のとおりです。

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

そしてCSSで：

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

もちろん、実際のデータに従って幅を定義する必要があります:-)

  • まず、 label と input を与えdisplay: blockて、サイズを割り当てて並べられるようにします。
  • float: leftエクスプローラーの動作が少し異なるため、どちらも取得します
  • ラベルを適切にフォーマットする
  • をハックしてbr、clear: leftどこかにあるようにしました。ラベルに配置すると、一部のブラウザーでは機能しなかったことを覚えています。

さらに、brブラウザが CSS をサポートしていない場合でも、適切な書式設定が得られます :-)

于 2008-12-04T00:21:42.410 に答える
5

トリックは、フォームがサンプルよりも複雑になると、テーブルが他の要素ではできない「柔軟なグリッド」を可能にすることに気付くことです。

たとえば、「入力」がテキスト ボックスよりも複雑な場合はどうなるでしょうか。たとえば、それぞれに独自のラベルが付いた一連のラジオ ボタン:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

単純なフォームだけが必要な場合は CSS が最適ですが、グリッドが必要になるとすぐに面白くなります...

あなたが本当にこれをやりたいなら、私はThe Man In Blue's Solutionをチェックします。それはかなりうまく機能し、非常にきれいです。

于 2008-12-04T00:36:36.653 に答える
3

柔軟なレイアウトを得るには他の提案の方がおそらく優れていますが、質問に対する文字通りの答えは次のようなものです。

<form action="www.example.com">
    <div class="table">
        <div class="tbody">
          <div class="tr">
            <div class="td"> <label for="name">Name</label> </div>
            <div class="td"> <input id="name"> </div>
          </div>
          <div class="tr">
            <div class="td"> <label for="ssn">Social Security Number</label> </div>
            <div class="td"> <input id="ssn"> </div>
          </div>
        </div>
    </div>
</form>

と

    <style type="text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

これは、Firefox、Chrome、Opera、および Safari の最新バージョンで動作します。また、IE8 Beta 2 (標準モード) でも動作します。IE7 以前では動作しませんが、「プログレッシブ エンハンスメント」とそのすべてです。

于 2008-12-29T17:14:59.150 に答える
3

人々は、フォームを自分の望むように表示するテーブルについて話します。これは、フォームを列に表示し、セマンティックな意味を失うことを厭わない場合にのみ当てはまります。次の HTML を配置すると、このフォームを必要な数のレイアウトで表示できます。

ところで - いいえ<br />

<form>
 <fieldset>
  <legend>Personal Info</fieldset>
  <div>
   <label for="name">Name</label>
   <input id="name" name="name" />
  </div>
  <div>
   <label for="ssn">Social Security Number</label>
   <input id="ssn" name="ssn" />
  </div>
 </fieldset>
</form>

フロートが確実にクリアされるように、 をクリアするか、<divs>または に設定することができます。overflow: hidden

上記の html のオプション:

Name |==============|    SSN |==============|

Name |==============|
SSN |==============|

Name     |==============|
SSN      |==============|

    Name |==============|
     SSN |==============|

   Name: |==============|
    SSN: |==============|

Name:
|==============|
SSN:
|==============|

上記のすべては、ほんの数行の css で実現できます。

ラジオ、チェックボックス、送信ボタンに関しては、もう少し複雑になりますが、css を使用してクリーンなセマンティック HTML を希望どおりに表示できます。

于 2008-12-29T15:53:37.223 に答える
0

私は次のようなことを考えていました：

<div style="text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

右の列が固定長の場合、可変テキスト長で問題ありませんが、この方法の欠点は何ですか?

于 2008-12-04T00:35:07.577 に答える