web-dev-qa-db-ja.com

HTMLテーブルをDivに置き換える

申し分なく、私はhtmlテーブルを使用すべきではなく、divは使用すべきだという考えに賛成しようとしています。ただし、次のようなコードがよくあります

<table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>

ラベルを整列させ、コントロールを整列させたい。テーブルを使用せずにこれを行うにはどうすればよいですか？

htmlcsshtml-table
55
Jacob Adams

これはトリックを行う必要があります。

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

コンセプトを理解してください。

43
partoa

テーブルはページレイアウトの主要な手段として推奨されていませんが、それらにはまだ場所がありますであることに注意してください。テーブルは、shouldを使用することができます。適切な場合と場所で、より一般的なブラウザ（ahem、IE、ahem）の一部がより標準に準拠するまで使用されます。 時々ソリューションへの最適なルート。

25
KOGI

私は簡単な解決策を全面的に見て、これを見つけました code それは私のために働いた。 right divは、読みやすくするために残した3番目の列です。

HTMLは次のとおりです。

<div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>

そしてCSS：

.container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }
10
Wavesailor

canリキッドレイアウトを失うことなく、単純なフロートベースのフォームを作成します。例えば：

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

ただし、固定幅と可変幅の複数の列のグリッドがある複雑なフォームレイアウトがある場合、これは壊れる傾向があります。その時点で、すべてを固定ピクセル位置にドロップするだけで、divに固執してリキッドレイアウトを放棄するか、テーブルに任せるかを決定する必要があります。

個人的には、液体レイアウトは、フォームのレイアウトに使用される正確な要素よりも重要なユーザビリティ機能であるため、通常は表を使用します。

4
bobince

基本的には、固定幅のページを使用して、それらのラベルとコントロールの幅を設定することです。これは、テーブルレスレイアウトが実装される最も一般的な方法です。

幅を設定する方法はたくさんあります。 Blueprint.css は、列/幅の設定に役立つ非常に人気のあるcssフレームワークです。

1
Ken Browning

これには非常に便利なオンラインツールがあり、テーブルを自動的にdivに変換するだけです。

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

そしてそれを説明するビデオ： https://www.youtube.com/watch?v=R1ArAee6wEQ

私はこれを毎日使用しています。私はそれが役立つことを願っています;）

1
Kaszoni Ferencz