col与colgroup标签 « 南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

col与colgroup标签

自从Div+CSS风潮袭来之后，很少人愿意在自己的页面里用table了，甚至以之为耻，杯具啊。。。

最近在做的仓储物流项目里，因为有大量的数据表格，所以这一段都在跟table打交道。或者有些人根本就没听说过col和colgroup这两个标签，col可以定义表格的1列或者多列，可以通过其span属性来控制包含的列数，而colgroup跟它差不多，也同样可以通过span来控制其包含的列数。不同的是，col是一个自闭合标签，跟
类似，而colgroup可以包含col，也可以像使用col一样去使用它，不过要注意它的闭合。它们都可以单独去用，但一般我会用colgroup包含col这样来用，显得比较好看。。。^_^二者都只能在table中使用，而且不能包含其它元素。

显而易见，它们的作用主要就是来控制单元格的宽度了，这样省去单独定义每个单元格的麻烦，可能有些人会觉得其实我们只需要定义一行td的宽度就行了，效果差不多，而col可以让我们做到更多，我们可以通过col来控制几列宽度的总和，还可以控制这列的背景色。。。。仁者见仁吧~

视觉的table是千变万化的，而我们的col是没法满足每一个视觉的，有些地方还是要通过单独定义单元格来实现，总结了下各浏览器对齐css属性支持的情况，不是很全，只是自己尝试用的几个做了简单测试，测试的css为：

.t-1 { width:300px; color:red; background:#ccc; text-align:center; padding:20px; text-decoration:underline; font-weight:900; font-style:italic; font-size:18px; line-height:30px; vertical-align:bottom;}

先在各浏览器下看下Demo吧：http://www.12sui.cn/test/cols-0910.php

各浏览器的表现如下图所示：

各浏览器对col css属性的支持情况：
	IE6/IE7	IE8/Safari/Chrome	Opera
width	是（仅当td未定义宽度时有效）	是	是（仅当td未定义宽度时有效）
color	是	否	否
background	是	是	是
text-align	是	否	否
padding	否	否	否
text-decoration	是	否	否
font-weight	是	否	否
font-style	是	否	否
font-size	是	否	否
line-height	是	否	否
vertical-align	是	否	否