表格使用表格是否可以接受？或者使用div更正确吗？

Question

我想知道将tables用于表单是否可以接受.

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

Answer 1

尝试字段集

我更喜欢将字段分成逻辑<fieldset>s,<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%; 
}

有关更深入的教程,请参阅此文章.

Answer 2

两者都是正确的.

我preffer使用一些div/ li,因为这可以让我做一些不同的布局,但tables对于forms不皱眉.

实际上,默认情况下,Django会为您提供表格格式.

Answer 3

表单不是表格数据.

使用CSS布置表单元素非常容易,我没有看到任何值得用表格混淆标记的值.就个人而言,我发现使用CSS布局表单比使用表格更容易.例如:

HTML:

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS:

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

使用该主题的简单变体,您可以制作外观漂亮,易于访问的表单,这些表单实际上比表格更容易使用.我已经使用了这种基本方法,并将其扩展到一些相当复杂的多列数据输入表单,没有任何问题.

Answer 4

你可以使用表格.就那么简单.