当前位置：首页 → 问答吧 → 项目中表格的使用

项目中表格的使用

时间：2009-08-21

来源：互联网

今天把以前项目中使用的表格做了整理，兼容ie6 7 8 ff，贴出了大家交流，讨论，呵呵，希望能总结出更好的表格结构（请不要讨论表格的颜色、行高、内间距等问题）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>项目中表格的使用</title> <style type="text/css"> body,html{ position:0px; margin:5px; font-size:12px; font-family:tahoma,"宋体";} tr,td{ line-height:22px;} table{ border-collapse:collapse; border:1px solid #bdbdbd; width:90%;border-top:0px\9; margin-bottom:5px; } .datetable caption,.listtable caption,.viewtable caption,.title3table caption{background-color:#a6d7f3; margin-left:-1px; margin-left:0px\9;} .datetable thead tr td,.listtable thead tr td,.viewtable thead tr td{ background-color:#d9f0fd;} .datetable tr th,.listtable tr th,.viewtable tr th { background-color:#eefaff; border-left:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd;} .datetable tr td { line-height:22px; background-color:#FFFFFF; border-left:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd;} .noborder{ border:0px; width:100%;} .noborder tr td{ border:0px;} .listtable td{line-height:22px; border-left:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd;} .listtable .g1 .c1,.listtable .g1 .c3,.listtable .g1 .c5{ background-color:#eefaff;} .listtable .g1 .c2,.listtable .g1 .c4,.listtable .g1 .c6{ background-color:#ffffff;} .title3table td {border-top:1px solid #bdbdbd;border-left:1px solid #bdbdbd;} .title3table .skyblue_bg{ background-color:#eefaff;} .title3table_thead td{background-color:#d9f0fd;} .title3table_th td{background-color:#eefaff;} /* .datetable { cellSpacing:expression(this.cellSpacing=1); border-collapse:collapse; background-color:#b9b9b9;} .datetable caption{background-color:#a6d7f3; margin-left:-1px; margin-left:0px\9;} .datetable td {background-color:#ffffff; } .datetable thead tr td {background-color:#d9f0fd;} .datetable tr th {background-color:#eefaff;}*/ </style> </head> <body> <table class="datetable"> <caption> caption标题（表格一） </caption> <thead> <tr> <td colspan="5">标题</td> </tr> </thead> <tr> <th>表格列标题</th> <th>表格列标题</th> <th>表格列标题</th> <th>表格列标题</th> <th>表格列标题</th> </tr> <tr> <td>test2</td> <td>test2</td> <td>test2</td> <td>test2</td> <td>test2</td> </tr> <tr> <td>test3</td> <td>test3</td> <td>test3</td> <td>test3</td> <td>test3</td> </tr> <tr> <td>test4</td> <td>test4</td> <td>test4</td> <td>test4</td> <td>test4</td> </tr> <tr> <td>test5</td> <td>test5</td> <td>test5</td> <td>test5</td> <td>test5</td> </tr> </table> <table class="listtable"> <colgroup class="g1" span="2"> <col class="c1" /> <col class="c2" /> </colgroup> <caption> caption标题（表格二） </caption> <thead> <tr> <td colspan="2">标题</td> </tr> </thead> <tr> <td>test1</td> <td>这里是右边内容</td> </tr> <tr> <td>test2</td> <td> </td> </tr> </table> <table class="listtable"> <colgroup class="g1" span="6"> <col class="c1" /> <col class="c2" /> <col class="c3" /> <col class="c4" /> <col class="c5" /> <col class="c6" /> </colgroup> <caption> caption标题（表格三） </caption> <thead> <tr> <td colspan="6">aathead</td> </tr> </thead> <tr> <td>test1</td> <td>表单内容</td> <td>test2</td> <td>表单内容</td> <td>test3</td> <td>表单内容</td> </tr> <tr> <td>test2</td> <td>表单内容</td> <td>test2</td> <td>表单内容</td> <td>test3</td> <td>表单内容</td> </tr> <tr> <td>test1</td> <td>表单内容</td> <td>test2</td> <td>表单内容</td> <td>test3</td> <td>表单内容</td> </tr> </table> <table class="datetable"> <caption> caption标题（表格四） </caption> <thead> <tr> <td>标题</td> </tr> </thead> <tr> <td><table class="noborder"> <tr> <td colspan="5">内嵌表格或程序控件</td> </tr> </table></td> </tr> </table> <table class="title3table" > <caption> caption标题（表格五） </caption> <tbody> <tr class="title3table_thead"> <td colspan="8">标题1</td> </tr> <tr class="title3table_th"> <td>表格列标题</td> <td colspan="4">表格列标题</td> </tr> <tr> <td>1</td> <td colspan="4">内容</td> </tr> <tr> <td>2</td> <td colspan="4">内容</td> </tr> </tbody> <tbody> <tr class="title3table_thead"> <td colspan="8">标题2</td> </tr> <tr class="title3table_th"> <td>表格列标题</td> <td>表格列标题</td> <td>表格列标题</td> <td>表格列标题</td> <td>表格列标题</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> <tbody > <tr class="title3table_thead"> <td colspan="5">标题3</td> </tr> <tr> <td class="skyblue_bg">属性名称：</td> <td style="width:80%;" colspan="4">表单内容</td> </tr> <tr> <td class="skyblue_bg">属性名称：</td> <td colspan="4">表单内容</td> </tr> <tr> <td class="skyblue_bg">属性名称：</td> <td colspan="4">表单内容</td> </tr> </tbody> </table> </body> </html>
提示：您可以先修改部分代码再运行

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

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

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

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

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

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

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

[ 本帖最后由 lijuan1230 于 2009-8-22 19:17 编辑 ]

作者: lijuan1230 发布时间: 2009-08-21

首先 div不是用来布局的 div是用来组织其他元素的布局的是css
表格也不是用来搞form的 <p>加<label>即可
表格中还有很多奇妙的属性我们换没有吃透colspan frame
表格就让他回归原点放置数据

作者: phoenix2212 发布时间: 2009-08-21

谢谢分享。。。。我马上就要用到表格了，我CSS才学习。。。

作者: winke360 发布时间: 2009-08-21

看css

和表格没啥联系吧

作者: phoenix2212 发布时间: 2009-08-21

以前用p，div这些标签做表单。
最后发现，用表格来做表单效果更好。

作者: yoom 发布时间: 2009-08-21

引用:

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

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

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

作者: lijuan1230 发布时间: 2009-08-22

引用:

原帖由 phoenix2212 于 2009-8-21 18:22 发表
看css

和表格没啥联系吧

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

作者: lijuan1230 发布时间: 2009-08-22

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

作者: lijuan1230 发布时间: 2009-08-22

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

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

作者: ltj0532 发布时间: 2009-08-23

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

但是我表格的结构和样式是否最简洁呢，我一直在考虑。

作者: lijuan1230 发布时间: 2009-08-24

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

作者: 14px 发布时间: 2009-08-25

引用:

原帖由 14px 于 2009-8-25 09:50 发表
表格在某些项目中的应用非常频繁，这东东确实很值得研究一番。
支持LZ分享经验。
看得出，楼主的几点经验都是实战中得出的结果（不过还是注意一下拼写：data还是date？）。
表单及其他控件是否采用表格的形式值得 ...

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

[ 本帖最后由 lijuan1230 于 2009-8-25 16:08 编辑 ]

作者: lijuan1230 发布时间: 2009-08-25

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

作者: ekinwei 发布时间: 2009-08-25

谢谢
实际中tfoot 用的比较少，也没有发现3个元素不齐全对表格显示有什么影响。

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

作者: lijuan1230 发布时间: 2009-08-25

谢谢分享，最近项目中也用到这些东东的。

作者: zjct20000 发布时间: 2010-11-19