Html 还有一个div vs Tables问题：表单

[元注：]我浏览了问题页面，对“DIVS vs Tables”“何时使用Tables vs DIVS”“div比Tables好吗”“Tables vs CSS”以及所有询问OMG人员相同问题的问题感到非常厌倦，但我希望看到人们处理规范示例翻译的所有方法“为什么你应该放弃并使用表格”：

名称
社会保险号码

问题：如何做到最好（语义、简单、健壮、流畅、可移植）在没有表格的情况下实现上述内容。对于初学者，我想一个简单的实现会在第一列中使用固定的列宽，但对于动态生成的内容，这可能会产生不确定的结果。在答案中包含您方法的优缺点会很好

另一个我很好奇的问题是垂直居中，但这方面的技巧在

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

我通常做的是：

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

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

• 首先，给标签和输入

  display:block

  ，这样就可以给它分配一个大小并对齐
• 它们都得到了

  float:left

  ，因为Explorer做的事情有点不同
• 很好地格式化标签
• 破解

  br

  以便在某个地方有一个

  clear:left

  ，我记得把它放在标签上在某些浏览器上不起作用

---

另外，使用

br

即使浏览器不支持CSS，也可以获得很好的格式：-）

我想的是：

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

名称：

社会保险号码：

---

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

诀窍是，当表单变得比示例更复杂时，您会意识到表格启用了“灵活的网格”，这是其他元素无法做到的

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

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

如果你只需要简单的表单，CSS是很棒的，但是一旦你需要一个网格，事情就会变得有趣

---

如果你真的想这样做，我会检查一下，它工作得很好，而且非常干净。

人们谈论表格以他们想要的方式显示表单，这是真的，只有当你想在列中显示表单并且愿意失去语义意义时。有了下面的HTML，就可以显示这个表单在尽可能多的布局，你可能希望

顺便说一句-对

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

所有这些都可以通过几行css来完成

---

当涉及到单选、复选框和提交按钮时，它会变得稍微复杂一些，但是干净的语义HTML可以使用css以您想要的方式显示。

尽管其他建议可能更适合灵活的布局，但问题的字面答案是：

名称
社会保险号码

与

div.table{显示：表格；边框间距：2px；}
div.tbody{display:表行组；}
div.tr{显示：表行；}
div.td{显示：表格单元格；垂直对齐：中间；填充：1px；}

---

这适用于最新版本的Firefox、Chrome、Opera和Safari。它也适用于IE8 Beta 2（标准模式）。它不适用于IE7或更早版本，但“渐进增强”“还有所有这些。

这确实是我第一次想到的，它非常清晰易懂。我希望有其他的解决方案可以为左边的列提供动态列宽如果你想要动态列宽，你必须用另一种方式来处理你的框，也就是说，所有的标签，所有的输入，还有，您肯定会松开水平对齐：-）假设您使用“空白：nowrap”和指定的行高度？你能逃脱吗？哦，等等，是的，然后你失去了垂直流动性。嗯，br标签上没有。有了这个布局，你可以说标签{clear:left}你可以有效地使用一个字段集或者一个dd/dt/dd组合来完成这个任务。你如何通过CSS添加“：”呢？不是到处都支持，但是：after伪元素可以做到这一点。这实际上与语义HTML非常契合，因为屏幕阅读器不必阅读它；我不知道你可以通过样式更改内容。rowspan和colspan不起作用（我只是在Firefox 3.0.6中尝试过）我同意这是解决方案，我只是不明白为什么有人会这样做。唯一的区别是，您基本上使用类来链接css和html，而不是html类型（即在css中使用class=“table”而不是form.table{}）。我现在开始重构50k行代码，我的大多数对话框表单（40+）都使用一个表格来排列输入、标签和特殊控件；这个表通常在一个div中。我正拼命地想知道为什么我应该改成这个方法。。。“但是，唉，我来的时间太短了。”冈斯林格说，“你不会的，至少不会这么做。”。选择类名是为了演示布局原则，而在生产代码中，应该使用描述内容的类名，而不是布局。问题是，有时您需要列和行的布局，但在语义上没有表格dat

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

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

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

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

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

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

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

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

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