Question

我问了一个问题，表格布局是否适合收集个人资料数据的表单。所有受访者都表示“表格不好”，但我没有看到如何在没有符合某些基本要求的表格的情况下做出明确答案：

标签和控件按预期排列

不必指定硬编码宽度

不要左右浮动，可能会在中间留下一个巨大的空白空间

例如，考虑一下这个简单的html布局http://jsfiddle.net/roger_davis/7h3bC/4/您如何建议修改html，使标签按预期排列（并在左侧。）

我看了一下，几乎我看过的每个网站都使用了表格布局。例如，对于stackoverflow上的配置文件编辑，您的配置文件输入表单将在表格中进行布局。 Google登录页面是一个表格，yahoo注册不使用表格但使用硬编码宽度。

我错过了什么吗？

Answer 1

以下是我对小提琴的更新：http://jsfiddle.net/7h3bC/9/ 基本上定义HTML：

<ul class='controls'>
    <li> <input type="checkbox" name="mycheckbox" id='mycheckbox'></li>
    <li><input type="text" name="myInput" id='myInput'></li>
</ul>
<ul class='labels'>
    <li> <label for="mycheckbox" >Tick me if you dare</label></li>
    <li><label for="mycheckbox">  Tick me if you dare</label></li>
</ul>

和css

<style>
.controls,
.labels
{
    float:left;
}
.controls 
{
     padding-right:5px;
     text-align:right;
}

</style>

Answer 2

我不确定浏览器对此的支持有多好，在FF4中测试过：http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

是的，我知道，我刚刚创建了一个使用div的表。但重点是，这是非常容易访问和语义上适当的。

编辑：在IE7中失败，其中固定宽度是唯一的方法，但8和9似乎没问题。

Edit2：切换标签/字段并设置右对齐：http://jsfiddle.net/shanethehat/7h3bC/12/。此时标记变得有点重。 :first-child可以替代使用left类，但代价是IE8。

跟进“表格布局的最佳实践 - 表格还是流程？”

2 个答案: