表格少设计的好文章

时间:2011-12-07 17:38:49

标签: jquery html jquery-ui

我需要一个好的资源,或者在不使用表格的情况下设计表单。

我尝试使用谷歌搜索,但没有找到任何有用的资源。

这里以我的形式..我有很多部分,每个部分都有自己的表格,每个表格有2或4列..

我需要一个标准样式表,可以帮助您实现任何类型的表单。在这种情况下,我感觉HTML表格与具有样式的Div相比更有用。

非常感谢任何帮助。

此致 库马尔。

4 个答案:

答案 0 :(得分:3)

A List Apart上的文章通常比其他文章更高。

Prettier Accessible Forms上的这个内容涵盖了我想要做的事情。或者至少它引入的原则应该扩展到实现它。请注意,表单字段包含在有序列表的元素中,正如作者所说,这是一种语义上合适的方法。

答案 1 :(得分:3)

使用表格。 这是对的!带来downvotes! : - )功能

表格用于表格数据。表格数据通常是指单元格与同一列中的其他单元格具有相同类型的数据,以及同一行中单元格的相关数据(反之亦然)。如果您有以下表格:

  First name:  |___________|
   Last name:  |___________|

我们不能通过添加列标题使表格更像表格数据:

╔═════════════╦═════════════╗
║ Field NameField value ║
╠═════════════╬═════════════╣
║ First name: ║ |_________| ║
╠═════════════╬═════════════╣
║  Last name: ║ |_________| ║
╚═════════════╩═════════════╝

由于列的类型相同:标签和输入,行相关:标签对应于字段,这是表格数据!用一张桌子!万岁,多么轻松! (但遗漏列标题和边界,当然 - 它们只是为了说明)

当您只有一行时,布局问题的表格真正发挥作用。即,您正在尝试创建列:

╔══════════════════╦═════════════════════════════╦══════════════╗
║ Left column      ║ Center column               ║ Right column ║
║                  ║                             ║              ║  ◄── Only one row
║                  ║                             ║              ║
╚══════════════════╩═════════════════════════════╩══════════════╝

或者当你的表充满了rowpans和colspans以及嵌套表。这通常是您使用表格进行布局的一个很好的信号。

╔════════════════════════════════════════════════════════════════════╦════════════════╗
║                                                                    ║ User name      ║
║                  Page Header (colspan=3, rowspan=2)                ╠════════════════╣
╠═════════════════╦════════════════════════════════════════════╦═════╩════════════════╣
║ Nav (rowspan=2) ║ Content                                    ║ Side bar (colspan=2) ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ╠════════════════════════════════════════════╩══════════════════════╣
║                 ║              Footer (colspan=3)                                   ║
╚═════════════════╩═══════════════════════════════════════════════════════════════════╝

(这实际上是我们1998年的表现 - 早在IE4 / NS4时代。哎呀!)

但是,如果您要呈现一个网格,其中列始终需要排列并且行总是需要排成行,那么您可能正在呈现表格数据。在这种情况下,表格可能是合适的。

如果您有4列,我猜测您有两列字段和输入:

  First name:  |___________|        Phone number:  |___________| 
   Last name:  |___________|       Email address:  |___________|

在这种情况下,请使用两个表。否则,您将使用表格进行布局,因为行中的所有单元格都不会彼此对应。

╔═════════════╦═════════════╗    ╔════════════════╦═════════════╗
║ First name: ║ |_________| ║    ║ Phone number:  ║ |_________| ║
╠═════════════╬═════════════╣    ╠════════════════╬═════════════╣
║  Last name: ║ |_________| ║    ║ Email address: ║ |_________| ║
╚═════════════╩═════════════╝    ╚════════════════╩═════════════╝

答案 2 :(得分:0)

答案 3 :(得分:0)

关于可维护,易于使用的CSS系统,用于创建具有可变列数的布局,我建议使用960 grid systemblueprint之类的东西 - 其中一个更为人所知,成熟CSS框架。

很久以前,使用表格进行布局确实已经过时了。不要将表格用于表格数据以外的任何其他内容。没有布局。当然不是形式;)