关于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>