布局和设计表格的标准(HTML/CSS)

Question

Web开发的一部分(从前端角度来看)是布局形式.从来没有标准的设置,我看到人们继续使用<tables>来保持造型一致.假设你要列出这个表格:

乍一看,似乎桌子可以轻松地布置这种形式.另一个选择是使用<fieldset>'s,可能还有一个列表.将字段集浮动到左侧,给它们相等的宽度.

我的问题是什么是最标准的表格形式？似乎有几种技术,但其中许多技术不能跨浏览器工作.

你会怎么做？为什么？

Answer 1

我必须说,最常见的方法是使用表格.不幸的是,基于表格的表格布局存在问题(大惊喜).一个重要的事情是表格将会溢出他们的容器(如果没有隐藏溢出)并且他们不像CSS那样压缩他们的内容.最重要的是,渲染表更昂贵(占用更多的CPU周期).总的来说,我认为,与纯CSS解决方案相比,基于表格的表单布局是僵硬且不灵活的,作为设计师,我在使用表格进行布局时会感到畏缩(你也应该!).

我开始喜欢的方法(并且越来越受欢迎)是用于布局表单的纯CSS2方法.我不会赞同自己提出这个想法,但它确实是直截了当的.你所要做的就是:

HTML:

<form action="process.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
</form>

CSS:

label, input {
    width:200px;
    display:block;
    float:left;        
    margin-bottom:10px;
}
label {
    width:125px;
    text-align:right;
    padding-right:10px;
    margin-top:2px;
}
br {
    clear:left;
}

正如您所看到的,CSS代码非常简单,结果非常棒.这种方法的优点是它使用更少的代码(下载速度更快),它更干净,没有乱糟糟的表格标签乱丢HTML文档(可维护性),我相信Web浏览器将更快地渲染CSS方法.

更新1:我还发现了一个使用无序列表的CSS方法.

更新2:@musicinmyhead提醒我在CSS表单布局中使用fieldset和legend标记.我在这里给我们编了一个快速而肮脏的小演示.

注意:我最初从以下网站了解到这种纯CSS表单布局:http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/