关于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，不用吧，表格线又实在难看，呵呵。
一般我们写表格都是这样子写的：

<table border="0" width="100%" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">XXX</td>
    <td bgcolor="#FFFFFF">XXX</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">XXX</td>
    <td bgcolor="#FFFFFF">XXX</td>
  </tr>
</table>


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

<style type="text/css">
table {
  border: 0px;
  width: 100%;
  background: #000000;
}
td {
  background:#FFFFFF;
}
</style>
<table cellspacing="1">
  <tr>
    <td>XXX</td>
    <td>XXX</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>XXX</td>
  </tr>
</table>


嗯，好像清爽了很多，表格与样式基本分离了，但可以看到，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(表身)等等，看下面的例子，这就是个完整的表格：

<table>
  <caption>表格介绍</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表脚1</td>
      <td>表脚2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>表身1</td>
      <td>表身2</td>
    </tr>
    <tr>
      <td>表身3</td>
      <td>表身4</td>
    </tr>
  </tbody>
</table>


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

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


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

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

<style type="text/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%; }
</style>

<table>
  <caption>表格介绍</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表脚1</td>
      <td>表脚2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>表身1</td>
      <td>表身2</td>
    </tr>
    <tr>
      <td>表身3</td>
      <td>表身4</td>
    </tr>
  </tbody>
</table>