今天把以前项目中使用的表格做了整理,兼容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 编辑 ] |