html - 表格/表格格式

Question

传统上，我总是通过设置每个属性的样式来布置表单，但我最近阅读了很多关于使用表格设置表单的内容。我的问题是，对于一个表格，当一个单元格相当大时，该列中的所有其他单元格都变成相同的宽度。在编辑它们时，我最终遇到的问题是输入字段之间的间隙很大，因为它们上方放置了一个大单元格，或者当您调整屏幕大小时，事情变得太近而无法舒适。

我尝试<td>单独设置宽度，但这不起作用。我创建了一个小提琴，看看是否有人能让我朝着正确的方向前进。

非常感谢大家！

http://jsfiddle.net/uFwkd/

Answer 1

使用 div 和 table 布局表单之间存在争议。对此有一些经验法则：

• 仅用于展示的表格
• 使用 div 作为表单布局

在您的情况下，您可以考虑将表格转换为 div。

Answer 2

jsfiddle 中的表（这似乎是问题的真正含义）包含具有不同单元格数量的行，例如

<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>

<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>

这在实践中导致了相当不可预测的渲染。

colspan您可以通过使用单元格上的属性（在上面的第一行，使用<td colspan="3">. ）确保所有行具有相同数量的槽（在本例中为 3包含两个单元格：其中一个需要跨越两列。

这会有些不自然（列中的单元格不会真正相互关联，只是放在同一列中）并且会暗示可访问性问题。表单的更好的表格结构对于每个输入控件（一个字段，例如一个input元素）有一行，一列中带有标签，控件本身在另一列中，因此您可以从类似的内容开始

<table>
<tr><td><label for="org">Organization name:</label></td>
    <td><input type="text" name="org" id="org" value="" size="20" /></td>
    </tr>