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

Question

[Meta-note:]我正在浏览问题页面,真的厌倦了"DIVS vs Tables""何时使用表格与DIVS""Divs比桌子更好""表格与CSS"以及所有问题相同的问题尽管如此,但是我希望看到人们解决"为什么你应该放弃并使用表格"的规范范例的翻译方式:

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

问题:如何最好(语义,简单,强大,流畅,可移植)实现上述没有表格.对于初学者,我想一个天真的实现使用第一列的固定列宽,但是对于动态生成的内容可以有iffy结果.在答案中包括你的方法的优点/缺点会很好.

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

当然,你必须根据你的实际数据来定义宽度:-)

• 首先,给出标签和输入display: block,以便为其分配大小并排列.
• 他们都得到,float: left因为资源管理器做的事情有点不同
• 很好地格式化标签
• 破解,br以便有一个clear: left地方,我记得把它放在标签上并不适用于某些浏览器.

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

Answer 2

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

例如,如果"输入"比文本框更复杂怎么办？例如一堆单选按钮,每个按钮都有自己的标签:

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

如果您只需要简单的表单,CSS就很棒,但只要您需要一个网格,事情就会变得有趣......

如果你真的想这样做,我会查看The Man In Blue的解决方案,它运作得很好而且非常干净.