html - 复杂表格 table vs div

Question

我在网上查找了使用 DIV 实现表单的示例，我看到的只是非常简单的一列表单。我有一些非常复杂的表格，这是一张图片:

http://img835.imageshack.us/img835/8292/formn.jpg

很容易让它与表格一起工作(我就是这样做的)，我唯一的问题是有时我需要不显示一些选择并将值向上移动一行以避免间隙 .

我开始使用 div 制作一些表单，但是当我更改浏览器窗口大小时它们会分崩离析，并且对齐东西并不容易。

这个主题很有帮助: Is it bad design to use table tags when displaying forms in html?但它并没有解决我的一些担忧。

您会提出什么解决方案？我可以在表中动态删除/插入值或尝试执行 DIV。

Answer 1

我会走 div 路线。只要您在应用 float 时注意宽度，实际上就可以非常简单地让布局在不同的屏幕分辨率下正常工作。

这里有一些规则:

1. 为您的表单或表单的包装元素设置最大宽度。如果您想在一行中 float 元素，请确保它们的宽度加在一起不超过此宽度。
2. 如果您要向 float 元素添加水平填充/边距，请记住这些会增加元素的总宽度。
3. 避免将百分比宽度与像素填充和边距混合使用。将百分比宽度应用于父元素，将像素填充/边距应用于子元素。
4. 在你的元素行之间使用清除元素来保持一切一致。

关于标记，您可以使用表单元素和 CSS 来创建语义结构:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

还有 CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

您可以 see the result here .