css - 使用表格作为表格是否可以接受？还是使用 div 更正确？

Question

我想知道对表单使用 table 是否可以接受。

严格来说，名称/值对是表格数据，不是吗？表单只是一组用户可自定义的名称/值对。那么在这种情况下使用 table 是否正确？或者我应该使用带有 CSS 样式的 div 吗？

Answer 1

尝试字段集

我更喜欢将字段分解为逻辑 <fieldset>有一个<legend>每个，因为:

• 代码不那么困惑
• 默认格式是用户友好的(我特别喜欢图例的显示方式)
• 使用 CSS 轻松设置样式

这是一个代码示例。请注意，标签的 for属性允许您单击该标签以将焦点移动到指定的输入(它匹配 id 属性)。

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

对于基本布局，您可以使用如下内容:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

参见 this article以获得更深入的教程。