Question

我们都知道使用Table作为布局辅助工具是错误的。

我经常使用表来构建表单。这在语义上是否正确？

我对此感到疑惑，因为表格布局（至少是我创建的表格）是合乎逻辑的，因为所有字段都有与预期输入字段相对应的标签。然后，所获得的数据在表格中明确地在语义上正确显示。但形式是否相同？
我觉得这是一个意见问题，但我很想听听人们在他们的意见背后的推理。

Answer 1

============

编辑：谢谢@Will Martin。实际上，我检查过，似乎使用表格结构形式在语义上是正确的，因为它在w3c标准文档中显示。见这里：http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

============

我昨天读了一篇文章（不幸的是法语），基本上说你不应该使用表来构建表格。（http://www.alsacreations.com/article/lire/1209-display-inline-block.html）

它没有说明原因，但它说你应该使用display：inline-block。但要小心，显示：inline-block是一个很好的参数，但在浏览IE7-6时却有缺点（不足为奇）。

阅读本文（英文），解释＆＃39; inline-block＆＃39; =＆GT; http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 2

Web标准项目已经完成了关于为什么以及如何避免html表单中的表的完整教程。这是一个非常简单的阅读并回答您的所有问题：

http://www.webstandards.org/learn/tutorials/accessible-forms/

Answer 3

这不仅仅是一个意见问题 - 使用带表格的表格存在语义和实际问题。

一般来说，主要由label - input对组成的简单表单，例如今天在网站上看到的登录表单，不需要任何额外的标记，因为label和交互式表单元素就语义而言，这就是你所需要的。任何额外的标记都会被添加到行李中，给页面增加了不必要的重量 - CSS应该可以灵活地执行您想要的任何操作，并且fieldset可以用于额外分离表单的不同部分。

但即使你有一个显然是表格的表格，你仍然应该首先考虑其他方法 - 混合表格和表格存在可访问性问题，如this article on 24 Ways所示。同一篇文章还展示了如何改编fieldset来做同样的工作，并且肯定会有趣的阅读。

Answer 4

这听起来更像是“辩论”，而不是Q＆amp;答：但是，我总是觉得任何需要表结构的表单布局（除了数据网格/电子表格，这是定义表）都是一个经过深思熟虑的用户体验。复选框，标记输入等的集合都可以更灵活（和语义）排列，而无需使用表格。

Answer 5

我认为这取决于形式。某些表单可能作为表格有意义 - 例如，您有一系列键值对的表格：

<table>
<tr>
    <th scope="row"><label for="first-name">First Name:</label></th>
    <td><input type="text" name="first_name" id="first-name" /></td>
</tr>
<tr>
    <th scope="row"><label for="last-name">Last Name:</label></th>
    <td><input type="text" name="last_name" id="last-name" /></td>
</tr>
<tr>
    <th scope="row"><label for="color">Favorite Color:</label></th>
    <td><input type="text" name="color" id="color" /></td>
</tr>
</table>

LABEL元素的组合使用对应于相关INPUT的ID的FOR属性意味着屏幕阅读器将能够合理地读取表单。我添加了TH元素来表示LABEL单元格和INPUT单元格之间表格中的语义关系。

然而，这样做并不是我的第一选择。由于每个表行/单元的公告，表标记的存在将使得使用屏幕阅读器进行收听变得更加费力。表格中的一些语义信息（TH标题与行中TD的关联）实际上复制了LABEL和INPUT之间的语义链接，因此使用屏幕阅读器，您可能会听到两次关于如何相同的信息这些都是相关的。

相反，我会做这样的事情：

<style type="text/css">
label { display: block; text-align: right; }
label input { width: 100px; }
</style>

<label for="first-name">First Name: <input type="text" name="first_name" id="first-name" /></label>

<label for="last-name">Last Name: <input type="text" name="last_name" id="last-name" /></label>

<label for="color">Favorite Color: <input type="text" name="color" id="color" /></label>

使用较少的HTML可以获得相同的效果。它具有与其输入相关联的标签（显式地（使用FOR / ID）和隐式地（因为INPUT是LABEL的子元素）。这意味着您必须能够预测输入的宽度，并且由于所有文本都是右对齐的，因此左边缘是粗糙的。

还有添加复选框和单选按钮的问题。在他们的情况下，首先输入和后面的标签是有意义的;但是我给出的例子看起来并不是很好。

那么，基本上呢？格式化表单是一个痛苦的对接。虽然它们通常由名称 - 值对组成，这些名称 - 值对作为表具有逻辑意义，但该方法存在潜在的可访问性问题。我非常希望避免出现类似问题的基于表格的解决方案，除非你有令人信服的理由使用表格。

在表格中设置HTML表单在语义上是否正确？

5 个答案: