表格/表单格式

Question

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

我尝试单独设置<td>宽度，但不起作用。我做了一个小提琴，看看有没有人能把我引向正确的方向。

提前感谢你们所有人！

http://jsfiddle.net/uFwkd/

Answer 1

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>

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

您可以确保所有行都有相同数量的槽(在本例中是3个)，方法是对单元格使用colspan属性(在上面的第一行，使用<td colspan="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>

Answer 2

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

• 表仅用于display
• Use div as a form layout

在您的情况下，可以考虑使用transforming your table into a div。