Question

[Meta-note：]我正在浏览问题页面，真的厌倦了“DIVS vs Tables”“何时使用表格与DIVS”“Divs比表格更好”“表格与CSS”以及所有问题问同样的OMG PEOPLE 但我希望看到人们解决“为什么你应该放弃并使用表格”的规范范例翻译的所有方式：

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

问题：如何最好地（语义上，简单地，健壮地，流畅地，可移植地）实现上述而不使用表格。对于初学者，我想一个天真的实现使用第一列的固定列宽，但是对于动态生成的内容可以有iffy结果。在答案中包括你的方法的优点/缺点会很好。

P.S。另一个我很想知道的是垂直居中，但是jakpsatweb.cz

很好地解决了这个问题。

编辑：scunlife提出了一个很好的例子，说明为什么我没有仔细考虑这个问题。表可以同时对齐多个列。问题仍然存在（我希望看到用于对齐/布局的不同CSS技术） - 虽然可以处理他的解决方案？更多参与的例子绝对是首选。

Answer 1

我通常做的是：

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

当然，您必须根据实际数据定义宽度： - ）

首先，提供标签并输入display: block，以便为其分配大小并排成一行。
他们都得到float: left，因为资源管理器做的事情有点不同
很好地格式化标签
攻击br，以便在某个地方有一个clear: left，我记得将它放在标签上并不适用于某些浏览器。

另外，使用br，即使浏览器不支持CSS，您也可以获得良好的格式： - ）

Answer 2

诀窍是当表单变得比你的样本更复杂时，你意识到表格启用了一个“灵活的网格”，没有其他元素可以做到。

e.g。如果“输入”比文本框更复杂怎么办？例如一堆单选按钮，每个按钮都有自己的标签：

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

如果你需要的只是简单的形式，那么CSS很棒，但只要你需要一个网格，事情就会变得有趣......

如果你真的想这样做，我会查看The Man In Blue's Solution，它运作得很好而且很干净。

Answer 3

人们谈论表格让他们的表单显示他们想要的方式，这是真的，只有你想在列中显示你的表格并且愿意失去语义。使用以下HTML，可以在您希望的任意数量的布局中显示此表单。

BTW - 否<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即可完成。

说到收音机，复选框和提交按钮，它会变得有点复杂，但干净的语义HTML可以按照你想要的方式显示css。

Answer 4

虽然其他建议可能更适合获得灵活的布局，但问题的字面答案如下：

<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或更早版本，而是“渐进增强”以及所有这些。

Answer 5

我想的是：

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

，如果右列是固定长度的，则将OK与可变文本长度对齐，但我想知道这种方法的缺点是什么？

然而另一个Divs vs Tables问题：表格

5 个答案: