项目中表格的使用

lijuan1230 · 发表于 2009-8-21 16:59:51

今天把以前项目中使用的表格做了整理，兼容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>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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来显示表格的间隔线[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 编辑 ]

phoenix2212 · 发表于 2009-8-21 18:03:29

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

winke360 · 发表于 2009-8-21 18:20:06

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

phoenix2212 · 发表于 2009-8-21 18:22:13

看css

和表格没啥联系吧

yoom · 发表于 2009-8-21 19:12:44

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

lijuan1230 · 发表于 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。

lijuan1230 · 发表于 2009-8-22 19:09:20

原帖由 [i]phoenix2212 于 2009-8-21 18:22 发表
看css 和表格没啥联系吧

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

lijuan1230 · 发表于 2009-8-22 19:12:27

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

ltj0532 · 发表于 2009-8-23 00:28:14

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

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

lijuan1230 · 发表于 2009-8-24 16:47:50

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

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

14px · 发表于 2009-8-25 09:50:24

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

lijuan1230 · 发表于 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 编辑 ]

ekinwei · 发表于 2009-8-25 16:32:48

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

lijuan1230 · 发表于 2009-8-25 17:36:29

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

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

zjct20000 · 发表于 2010-11-19 08:47:37

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

woyaonipeizhewo · 发表于 2013-3-12 17:31:23

不错，其实不用讨论div和table这些，等到你用的时候就明白了

帐号		自动登录	找回密码
密码			注册

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

回复 5# yoom 的帖子

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

回复 9# ltj0532 的帖子