关于table如何通过XHTML验证那档子事

原文出处链接：http://www.54caizi.org/post/table-to-valid.html

 

很多人都因为强制要求自己的页面通过XHTML的标准验证而放弃使用table(表格)，想尽一切办法用可以通过验证的标签来模拟表格，什么ul+li 啦，什么dl+dt+dd啦，有的甚至用javascript的document.write输出表格，真够晕的。因为我们常用的table里面会包含一 些xhtml标准验证不允许的属性，如cellspacing属性，加上这个属性就通不过验证，在CSS里好像又根本没有这个属性的样式，写不进CSS， 不用吧，表格线又实在难看，呵呵。
一般我们写表格都是这样子写的：


  
    XXX
    XXX
  
  
    XXX
    XXX
  



在 table里定义边框(border)为0，定义背景颜色，而表格间距(cellspacing)定义为1，再在td里定义背景颜色，这样table虽然 定义了背景，但table里布满了td，td也定义了背景，table里还定义了表格间距为1，所以变成table的背景只留下了表格的间距了，其它地方 已经被td的背景覆盖了，看起来像个定义了1px边框的表格一样。
这样的写法是我们很早以前的写法了，那时我们都还没有关注web标准，也基本没有关注css样式，但现在我们可以定义一个css，可以简化及分离一下，如：


table {
  border: 0px;
  width: 100%;
  background: #000000;
}
td {
  background:#FFFFFF;
}


  
    XXX
    XXX
  
  
    XXX
    XXX
  



嗯， 好像清爽了很多，表格与样式基本分离了，但可以看到，cellspacing="1"这个属性还在，不能去掉，一去掉的话，表格间距就变成2px了，就不 是那种1px的细线边框了，很难看。table默认的间距就是2px，真晕，干吗要默认为2px，还没法在CSS中定义cellspacing这个属性， 这不是害人嘛。加上cellspacing="1"这个属性又没法通过XHTML验证，正是因为这个原因，所以导致很多追求完美的人去研究其它方法来代替 表格，让其通过验证，汗。。。
其实我们大可不必这么“要求完美”，W3C从来没说过不允许使用table，table仍然是xhtml里非常重要的一部分，想想一个相对比较复杂的表格，如果用其它方法来代替表格，那不是要人命嘛。通不过验证就表示程序写得烂？呵呵，不至于吧。
但我们是不是就只能忍受着xhtml验证时的错误报告呢？其实也不是啦，因为我们一般用的都是规则表格，并不复杂，行数列数都是标准的，没有什么合并行合并列的，那其实还是有办法定义CSS，让其通过xhtml的验证的。
这里不得不说一说表格的标准写法，其实我们以前写table，严格来说都是错的，为什么呢？呵呵，因为一个完整的表格里可不光是只有tr和td的，还有thead(表头)，tfoot(表脚)，tbody(表身)等等，看下面的例子，这就是个完整的表格：


  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
    
      
      
    
  


表格介绍

表头1	表头2
表脚1	表脚2
表身1	表身2
表身3	表身4




caption 是表格的介绍，说明这个表格里的是些什么东东，这个标签我们比较少用，可能绝大部分人都压根没用过这个标签。还请注意了，thead表头的单元格容器不是 td而是th，它的默认字体会比表身及表脚要加粗一点。thead, tfoot, tbody三者顺序还不能乱动，tfoot是写在tbody前面的，但浏览时会自动的排到tbody的后面去的，不用担心，呵呵。
好了，这个表格没得说了吧，又完整，又没有任何其它的属性值，通过验证是肯定没问题的了。但如何来解决表格边框的问题呢？呵呵，看下面的CSS吧：


table,td,th {
  border:1px #000000 solid;  /*边框为1像素的黑色实线*/
  border-collapse:collapse;  /*单元格相邻的边框合并*/
  background:#FFFFFF;  /*定义背景颜色*/
}



没错，就这么简单，关键就在于第二句：border-collapse:collapse; 意思是将单元格相邻的边合并，单元格的边框都是1像素，相邻就应该有2像素了，但它们之间的边框被定义为合并了，不就还是1px吗？这不就是我们要的1px的细线边框吗？

OK，最后分享一下才子自己的完整CSS定义，感觉比较考虑比较周到也比较美观了，各位参考一下：


table,td,th {
  border:1px #09F solid;
  border-collapse:collapse;
  padding:5px;
  background:#FFF;
}
table {
  margin:5px 0;
  width:100%;
  font:12px/1.5 Verdana, Geneva, Arial, Helvetica, Sans-Serif;
  text-align:left;
}
caption { text-align:left; font:bold 1.5em Verdana,Sans-Serif; }
thead th, tfoot td { text-align:center; background:#D9ECFF; }
thead th { font-size:120%; }





  
  
    
      
      
    
  
  
    
      
      
    
  
  
    
      
      
    
    
      
      
    
  


表格介绍

表头1	表头2
表脚1	表脚2
表身1	表身2
表身3	表身4