html - html中的高效表单布局

Question

我正在将 Silverlight 应用程序转换为“html5”网络应用程序。我只是想知道什么是最有效/可读的庄园来布局复杂的企业表格。下面是一个表单示例：

我可以在几分钟内把它放在 xaml 中。它的布局如下：

我听说在 html 中使用表格的形式很糟糕。任何意见，将不胜感激。

谢谢

Answer 1

有些人可能会争辩说，表格确实是表格数据，或者至少是表格数据的输入。而不是使用如下表：

Name      | John 
Last Name | Doe
Country   | XX

你可以那样说：

Name      | <input>
Last Name | <input>
Country   | <input>

也可以像桌子一样工作，所以我认为这取决于您。

Answer 2

我建议使用面向对象的 CSS 来自动解决布局问题。您将希望在不同的场景中使结构适合不同的大小，因此您可能希望在 CSS 中使用网格系统来集中设计布局。

.left { float:left; }
.right { float: right }
.global { width: 960px; }
.onefifth { width: 20%; }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

等等...

我向您保证，这种方法将大大减少您的样式，从而提高性能。

恕我直言，不使用表格让生活更轻松。

参见：https ://github.com/stubbornella/oocss/wiki/ （面向对象的 CSS）这是 Nicole Sullivan 对 Yahoo 和 Facebook 所做的，绝对值得一看

Answer 3

首先，您真的需要 html5 还是只是听说它很现代？

其次，如果您不将表格用于表格数据，表格就会很糟糕。例如，使用表格来布局网站是一件非常糟糕的事情。对于您的场景，我建议您稍微了解一下 css 并利用一些浮动、div、字段集等。