Question

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

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

提前谢谢你们所有人！

http://jsfiddle.net/uFwkd/

Answer 1

使用div和table来布局表单之间存在争议。关于这一点有一些经验法则：

仅供显示的表
将div用作表单布局

在您的情况下，您可以考虑transforming your table into a 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属性（在上面的第一行上，使用{{}，可以确保所有行具有相同数量的插槽（在本例中为3），从而使结构更合适1}}。这需要对包含两个单元格的行进行一些人工决策：其中一个需要跨越两列。

这有些不自然（列中的单元格实际上并不相互关联，只是将放在同一列中）并且意味着可访问性问题。表单的更好的表格结构为每个输入控件（一个字段，例如一个<td colspan="3">元素）有一行，标签在一列中，控件本身在另一列中，所以你应该从类似

input

表/表格格式

2 个答案: