找回密码
 注册

QQ登录

只需一步,快速开始

查看: 5564|回复: 15

[讨论] 项目中表格的使用

[复制链接]
发表于 2009-8-21 16:59:51 | 显示全部楼层 |阅读模式
今天把以前项目中使用的表格做了整理,兼容ie6 7 8 ff,贴出了大家交流,讨论,呵呵,希望能总结出更好的表格结构(请不要讨论表格的颜色、行高、内间距等问题)。

 提示:您可以先修改部分代码再运行


以上表格的间隔线都是通过td的border来显示。
表格一:主要用于项目中数据的展现。
表格二:用于表单的填写。
表格三:在表格2基础上扩展,主要用于搜索表格。
表格四:用于表格嵌套或程序中控件的嵌套。
表格五:用于表格内部有并列内容的情况。

也许很多人有疑问,现在都用div去布局了,为什么还要搞这么多表格呢。div当然好,div体现在布局,结构,但是div来展现数据却不那么合适。这里对于div与表格的好坏不罗嗦。

表格在项目中展现数据是很必要的,那么怎么样的表格展现才是最好的方法呢,主要想和大家交流、讨论。
下面是我个人分析后的:
表格:最早是用cellSpacing来显示表格的间隔线[i](上面注释掉的datetable),修改注释内容,用cellSpacing控制同样能正常显示,表格内部嵌套控件也不用另外添加样式,挺不错。是吗?那么你放进ie8,ff里面看下就会知道问题所在。如果你能肯定的说,我的客户不用ie8,ff,以后也不会涉及到兼容性调整问题,那么你继续保持这个方式来做。
表格一:优:ie6 7 8 ff兼容。劣:td中的boder会影响内部嵌套表格,需要多写一个样式。
原方法:优:表格灵活性好,内部嵌套内容不受影响。劣:不能兼容ie8 ff。


表格二,表格三:这2个表格主要是colgroup标签,通过col可以直接控制列的样式。我并不能说这个方法最好,但是能够有效的达到我目的。有效是指不用独个单元格去添加样式能实现效果。为什么我用了此方法而不说是否最好呢,因为做原型后,虽然有页面给开发人员,但是后期新增页面,开发人员却容易遗漏colgroup标签,效果显示就会有影响。有人说,我不独个样式控制,我用背景怎么样,也错了,在数据展现时,表格通常是可伸缩,如果是背景,那么你怎么保证伸缩后的尺寸呢。
colgroup标签:优:colgroup标签能统一控制表格内列样式。劣:开发人员容易将标签遗漏。
独个添加样式:优:容易控制,可以灵活调整。劣:费时。
背景图片:优:快速,不涉及开发人员工作。劣:不能伸缩,后期若调整需要修改图。


表格四:表格内部嵌套控件,是由于用.net开发,会有一些控件嵌套关系,这里就不多说。
表格五:开发中内容展现是琢磨不定的,所以,这个表格在内部添加了一些样式,主要是方便灵活控制。也有人说加载慢,你可以仔细看看,虽然表格是整个加载才显示,但是tbody标签可以控制tbody标签中的内容逐个加载,那么就不需要等到表格内所有内容加载完了。

以上都是我个人理解与总结,希望大家一起讨论,找到更好的方法。

补充一下:似乎大家都误解我的意思,我想说,在结构相同的情况下,用最少的样式来实现更多的效果。并且能够在各浏览器兼容。
或者说,你改变成更好的结构,用更好的方法实现项目中数据展现。

[[i] 本帖最后由 lijuan1230 于 2009-8-22 19:17 编辑 ]
发表于 2009-8-21 18:03:29 | 显示全部楼层
首先 div不是用来布局的 div是用来组织其他元素的 布局的是css
表格也不是用来搞form的 <p>加<label>即可
表格中还有很多 奇妙的属性 我们换没有吃透colspan frame
表格就让他回归原点 放置数据
回复 支持 反对

使用道具 举报

发表于 2009-8-21 18:20:06 | 显示全部楼层
谢谢分享。。。。我马上就要用到表格了,我CSS才学习。。。
回复 支持 反对

使用道具 举报

发表于 2009-8-21 18:22:13 | 显示全部楼层
看css 和表格没啥联系吧
回复 支持 反对

使用道具 举报

发表于 2009-8-21 19:12:44 | 显示全部楼层
以前用p,div这些标签做表单。
最后发现,用表格来做表单效果更好。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-22 19:05:58 | 显示全部楼层
原帖由 [i]phoenix2212 于 2009-8-21 18:03 发表
首先 div不是用来布局的 div是用来组织其他元素的 布局的是css
表格也不是用来搞form的 加即可
表格中还有很多 奇妙的属性 我们换没有吃透colspan frame
表格就让他回归原点 放置数据

我上面说这里不讨论关于div,不过纠正一下你的说法,
你说css用来布局,我请问,如果没有div来划分结构,区域,css如何来布局。css是对div的结构进行表现,得到更好的外观效果。

你下面说到表格来放置数据,我是非常认同,请继续讨论关于表格的结构相关或数据展现最好的形式。不要讨论div。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-22 19:09:20 | 显示全部楼层
原帖由 [i]phoenix2212 于 2009-8-21 18:22 发表
看css 和表格没啥联系吧

我不是说css与表格的联系,css是让表格展现更好的效果没错,但是,我想知道,大家做项目的数据展现中,表格是怎么样的结构和样式呢?
怎么样的方式是最好的。
我上面写到的是目前可行的方法,但是其中都有优劣,我也在寻找更好的表现形式。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-22 19:12:27 | 显示全部楼层

回复 5# yoom 的帖子

没错呢,深有感触呢。
最初用div、css来做项目表单,还觉得后期更改可以随时变换位置,不像表格那样去复制。
实际上,开发人员对div、css不熟悉,很容易引起页面变形,就需要我们去调整。
后期呢,客户需求变化,整个页面后来都用表格重新排版,呵。
回复 支持 反对

使用道具 举报

发表于 2009-8-23 00:28:14 | 显示全部楼层

回复 8# lijuan1230 [楼主] 的帖子

开发人员要看是什么样的开发人员,和asp的合作,表格还是省心的
和.net合作就不同了,选择就多样化了

复杂的二维数据,表格是首选,表格也有很多标签和属性,合理利用会省很多时间
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-24 16:47:50 | 显示全部楼层

回复 9# ltj0532 的帖子

我们公司用.net开发,所以都是和.net开发人员合作。
表单都是用html中表格的结构。
数据展现的就是GridView,用skin控制,但生成的是table,道理是一样的。或许说GridView通过skin更好控制一些。

但是我表格的结构和样式是否最简洁呢,我一直在考虑。
回复 支持 反对

使用道具 举报

发表于 2009-8-25 09:50:24 | 显示全部楼层
表格在某些项目中的应用非常频繁,这东东确实很值得研究一番。
支持LZ分享经验。
看得出,楼主的几点经验都是实战中得出的结果(不过还是注意一下拼写:data还是date?)。
表单及其他控件是否采用表格的形式值得再斟酌,这里就LZ数据表格的源码说几点个人的看法:
1. B/S结构软件中,表格的数据展现是要尽可能将数据完全在第一屏展示,所以宽度我一般使用100%。
2. 为这个“很语义”的caption的兼容来写hack有点烦,也不是完全兼容,我使用的是h4标签来处理。不过或许你的客户不会使用chrome/马桶3之类的浏览器。
3. 因为屏宽/屏高可能不够展现数据,很可能涉及到翻页、横向滚动的问题,这些需求应该在考虑范围之内。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-25 16:04:00 | 显示全部楼层
原帖由 [i]14px 于 2009-8-25 09:50 发表
表格在某些项目中的应用非常频繁,这东东确实很值得研究一番。
支持LZ分享经验。
看得出,楼主的几点经验都是实战中得出的结果(不过还是注意一下拼写:data还是date?)。
表单及其他控件是否采用表格的形式值得 ...


谢谢你的回复!
确实写错了,应该是data,数据表格。
1.你上面说到表格宽度百分比,用百分比是不错,避免内部嵌套表格还要再次用样式控制,我没有用百分比的原因是,很多情况下,100%的表格会被滚动条挡住,留白看起来效果更好些。
2.caption标签在ie8中存在问题(即:caption的背景需要鼠标移到或鼠标点击之后才显示),影响页面效果。暂无找到方法。
3.第3点说的没错,但我们这边项目的翻页都是第3方控件来实现,所以暂不涉及。
补充一下:框架的使用也需要在考虑范围内。

[[i] 本帖最后由 lijuan1230 于 2009-8-25 16:08 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-8-25 16:32:48 | 显示全部楼层
如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-25 17:36:29 | 显示全部楼层
谢谢
实际中tfoot 用的比较少,也没有发现3个元素不齐全对表格显示有什么影响。

刚才还以为caption标签背景问题是table元素不全影响,经测试于上面3个元素无关。
我一直怀疑是colgroup、col影响,但是这2个标签若去掉,表单中背景不好控制,否则需要手动添加或背景图片都不灵活。
回复 支持 反对

使用道具 举报

发表于 2010-11-19 08:47:37 | 显示全部楼层
谢谢分享,最近项目中也用到这些东东的。
回复 支持 反对

使用道具 举报

发表于 2013-3-12 17:31:23 | 显示全部楼层
不错,其实不用讨论div和table这些,等到你用的时候就明白了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-19 14:00 , Processed in 0.072266 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表