Divs vs Tables的另一个问题：表格

Question

[注：]我正在浏览问题页面，真的对“ DIVS vs表”，“何时使用表vs DIVS”，“ Divs比表更好”，“ Tables vs CSS”以及所有问
相同 的问题感到厌倦 天哪， 但我想看看人们如何处理“为什么要放弃并使用表格”这一典型例子的翻译：

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

问题：
如何最好地（有意义地，简单地，稳健地，流畅地，可移植地）实现没有表的上述内容。对于初学者，我猜想一个幼稚的实现会在第一列中使用固定的列宽，但是对于动态生成的内容可能会产生不确定的结果。在答案中包括您方法的优点/缺点将是不错的。

PS我想知道的另一个很多地方是垂直居中，但是在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; }

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

• 首先，给label和input display: block，以便可以为其分配大小并排列。
• 他们俩都float: left因为资源管理器做事有所不同
• 很好地格式化标签
• 破解br这样，有一个clear: left地方，我记得把它的标签上并没有对一些浏览器的工作。

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