Question

在有人关闭这个问题或抱怨之前......我一直在寻找StackOverFlow网站，但找不到任何关于表格和表格的信息。

我有一个表格，其中包含至少20到35个不同类别的标签和文本框。所以开始为每个元素使用CSS会太多了。

出于某种原因，我觉得使用表格将所有字段与各自的标签对齐，因为有些标签会比其他标签大 （即'First Name'比'更大的字'年龄'） ，因此布局会失真。而且我无法开始为每个标签和文本框应用css（每个大约20个......这是40个单独的css规则）。

除非有人能给我一些技巧，否则我会很高兴。

我知道CSS对形式有好处，但是那些非常大的形式呢？

Answer 1

只要您使用级联对您有利，CSS表单就没有问题。

事实上，我建议使用table。

只需设置一些基本规则......

input {
   padding: 3px;
   float: right;
}

然后处理规则的例外......

input#age {
   float: none;
}

Answer 2

表格不是表格数据，简单表格只是表面上看起来像。

CSS适用于长格式。拥有大多数数据的样式。然后是针对短位数据和/或长位数据的更具体的样式，等等。不要单独设计一切。

Answer 3

尝试使用UL和LI而不是表格，如下文Click to see article

中所述

它也提供了CSS。

Answer 4

您不需要40个单独的CSS规则。您可以为所有标签设置一个规则，为所有文本框设置一个规则。

但是 - 说过 - 这种布局，你有两列东西，你想要第1列中的所有内容（本例中的标签）彼此对齐，以及col 2中的所有内容（文本框）彼此对齐，同时保持行对齐 - 这正是好桌子所擅长的那种东西。

我是CSS的主要倡导者，我相信表格的滥用（例如布局页面）是邪恶的，邪恶的，邪恶的 - 但我肯定会选择这个表格

Answer 5

在一天结束时，一切都与偏好和功能有关。我个人的偏好是div / CSS。 CSS的级联性和代码的清洁度等。

但是，嘿，如果你喜欢桌子 - 从屋顶喊出来！

Answer 6

您可以使用jQuery Masonry。

据我所知，它将实现您需要的布局，您所要做的就是添加类和单行JS代码。

Answer 7

您可以使用CSS创建良好的可访问表单，而无需太多CSS规则（无论如何，对齐部分）。您基本上只需要设置所有标签的宽度 - 使用一个规则 - 并定义它们与输入元素的交互方式。在http://www.websiteoptimization.com/speed/tweak/forms/有一篇很好的文章（我刚发现的第一篇文章，我相信还有很多其他文章）。

Answer 8

对于表格IMO，我宁愿使用表格清洁。使用CSS进行网站布局。但这又是我的意见......

表格中的HTML表单与否

8 个答案: