定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^

代码如下：

复制代码 代码如下:

<style>

table.Demo{

border-collapse:collapse;

color:#454545;

font:11px/150%Verdana,Arial,Helvetica,sans-serif;

}

table.Demoth{

padding:3px7px;

border:1pxsolid#f60;

border-width:2px1px1px;

background:#ffffe1;

}

table.Demotd{

padding:3px7px;

border:1pxsolid#f60;

}

table.Democol.Col1{

text-align:right;

background:#f5f5f5;

}

table.Democol.Col2{

color:#00c;

}

table.Democol.Col3{

font-style:italic;

}

</style>

<tableclass="Demo">

<tr>

<th>TagName</th>

<th>ClassName</th>

<th>CSS</th>

</tr>

<colgroup>

<colclass="Col1"/>

<colclass="Col2"/>

<colclass="Col3"/>

</colgroup>

<tr>

<td>table</td>

<td>Demo</td>

<td>border-collapse:collapse;<br/>color:#454545;<br/>font:11px/150%Verdana,Arial,Helvetica,sans-serif;</td>

</tr>

<tr>

<td>th</td>

<td></td>

<td>padding:3px7px;<br/>border:1pxsolid#f60;<br/>border-width:2px1px1px;<br/>background:#ffffe1;</td>

</tr>

<tr>

<td>td</td>

<td></td>

<td>padding:3px7px;<br/>border:1pxsolid#f60;</td>

</tr>

<tr>

<td>col</td>

<td>Col1</td>

<td>text-align:right;<br/>background:#f5f5f5;</td>

</tr>

<tr>

<td>col</td>

<td>Col2</td>

<td>color:#00c;</td>

</tr>

<tr>

<td>col</td>

<td>Col3</td>

<td>font-style:italic;</td>

</tr>

</table>

抛砖引玉，更多效果就由你DIY了！

table.Demo { border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif; } table.Demo th { padding: 3px 7px; border: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1; } table.Demo td { padding: 3px 7px; border: 1px solid #f60; } table.Demo col.Col1 { text-align: right; background: #f5f5f5; } table.Demo col.Col2 { color: #00c; } table.Demo col.Col3 { font-style: italic; }

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

【推荐一篇利用th,colgroup,col定义表格样式】相关文章：

★ 移动互联网之响应式设计

★ CSS中基代码base.css一览

★ css控制表格细边框样式

★ IE7.0以下版本列表li中的元素错位一个上一个下的解决方法

★ 纯CSS绘制三角形箭头效果

★ CSS样式表教程:screen媒体类型的作用

★ css3文本阴影属性text-shadow说明

★ CSS自定义滚动条样式

★ CSS如何控制li标记样式

★ 网站制作如何用CSS控制超链接样式