我不断听到div标签应用于布局目的，而不是table标签。那么这也适用于表单布局吗？我知道表单布局仍然是布局，但似乎使用divs创建表单布局需要更多的" html"和" css"。因此，考虑到这一点，表单布局应该使用div标记代替吗？

解决方案

使用表格肯定比使用div布局表格要容易，但是请记住，表格应该意味着它以一种常规的方式呈现数据供用户查看，而不是按照给定的顺序在屏幕上放置框。通常，我认为表单布局应使用div来决定表单元素的显示方式。

如果我们只需要简单的行列夹点类型布局，那么使用表格就不会感到内。我不知道有人会因为不是CSS而称其为"不良设计"。我见过许多基于CSS的糟糕设计。我喜欢CSS，并且认为CSS在许多方面都比传统的嵌套表布局优越，但是可以做到最好，最容易维护，并做出更重要，更有意义的决策。

这是一个灰色区域。并非标记中的所有内容都有明确定义的界限，在这种情况下，我们可以使用自己的个人喜好并做出判断。这不太适合组织数据的想法，但是单元格是跨多个轴关联的，这是我用来决定某项是否适合表的经验法则。

是的，它确实适用于表单布局。请记住，还存在诸如FIELDSET和LABEL之类的标记，它们专门用于向表单添加结构，因此，这并不是仅使用DIV的问题。我们应该能够用最少的HTML标记表单，然后让CSS完成其余的工作。例如。：

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

一般原则是，我们想使用任何HTML元素来最好地传达我们想要的语义内容，然后依靠CSS直观地表示该语义内容。遵循该原则可带来许多内在好处，包括更容易进行站点常规的视觉更改，搜索引擎优化，多设备布局和可访问性。

因此，简短的答案是：我们可以做任何我们想做的事，但是最佳实践建议我们仅使用表格标签来表示表格数据，而使用可以最好地传达我们要表示的内容的任何html标签。最初可能会有些困难，但是一旦我们习惯了这个主意，我们会想知道为什么以其他方式做到了。

根据我们要对表单进行的操作，使用语义标记和CSS不应花费太多标记，尤其是如果我们依赖CSS的级联属性时。另外，如果我们在站点中的许多页面上有几种相同的表单，则语义方法在编码和维护方面都更加有效。

如果表单以表格格式进行布局(例如，左侧的标签和右侧的字段)，那么可以，使用表格标签。

我认为，良好的HTML和CSS很难很好地布局表单，这是一个神话。 CSS为我们提供的布局控制级别远远超过了任何笨拙的基于表格的布局。这不是一个新主意，正如早在2006年的《 Smashing Magazine》上的文章所显示的那样。

我倾向于在表单中使用以下标记的变体。我的CSS中有通用的.form样式，然后是文本输入，复选框，选择，文本区域等的变体。

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}

<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

桌子不是邪恶的。当需要显示表格数据时，它们是迄今为止的最佳选择。表单恕我直言，它们不是表单数据，而是CSS，它提供了足够多的工具来按我们喜欢的方式对表单进行布局。

表单不是"表示形式"，我们要求数据，通常不表示数据。我在表格数据中使用了很多内联编辑。显然，当从表示切换到输入时，我将数据单元td用作输入元素的保持器。

为了使表单尽可能易于访问并且在语义上正确，我使用以下格式：

<fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

在这些表单布局问题中，我很少看到讨论过的一件事，如果我们选择了一个表格来对表单进行布局(如其中一个答案中所述，在左侧带有标签，在右侧则是字段)，那么该布局就是固定的。在工作中，我们最近不得不使用阿拉伯语对我们的Web应用程序进行快速的"概念验证"。使用表格进行表单布局的应用程序基本上卡住了，而我可以通过更改CSS文件中的大约十行来反转所有页面上所有表单字段和标签的顺序。

我在这里看到的大多数答案似乎都是合适的。我唯一要添加的内容，特别是对无动于衷或者马特先生的，是使用<dl> / <dt> / <dd>。我相信这些在语义上代表了该列表。

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

我们可能想重新设置它们的样式，但这从语义上说了这是怎么回事，即我们有一个"术语"(<dt>)和"定义"(<dd>)的列表，术语为标签和定义是用户输入的值。

我主要使用CSS，直到CSS成为拖累。例如，使用表创建3+列(3组标签+表单域)表单要比在CSS中容易得多。我无法使布局在所有使用纯CSS的主流浏览器中都能正常显示，而我却花了太多时间来使其正常工作。所以我说把它拧紧，我很容易用桌子做了。表还不错。