当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 推荐一篇利用th,colgroup,col定义表格样式

CSS样式表
一列固定宽度布局和背景图片绝对定位的实现代码
CSS也要语义化说明
CSS 模块化的理解
css 一些技巧及易错的细节
网页自动满屏实现代码
CSS 一些使用用法
div+css table布局实现代码
CSS 完美兼容IE6/IE7/FF的通用hack方法
css 背景图片平铺技巧
修复网页在IE8 下的显示兼容问题
IE CSS半透明的注意事项
CSS Display与Visibility的不同
CSS 进度条实现代码
css实现div在下拉菜单之上
必须知道的10个不常用HTML标签
css 去除连接时的虚线框
CSS教程:彻底弄懂闭合浮动元素
CSS实现强制浏览器分页
CSS教程:背景background属性应用
CSS网页布局困扰新手的问题

CSS样式表 中的 推荐一篇利用th,colgroup,col定义表格样式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 216 ::
收藏到网摘: n/a

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

<style>
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;
}
</style>
<table class="Demo">
<tr>
<th>TagName</th>
<th>ClassName</th>
<th>CSS</th>
</tr>
<colgroup>
<col class="Col1" />
<col class="Col2" />
<col class="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: 3px 7px;<br />border: 1px solid #f60;<br />border-width: 2px 1px 1px;<br />background: #ffffe1;</td>
</tr>
<tr>
<td>td</td>
<td></td>
<td>padding: 3px 7px;<br />border: 1px solid #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了!
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]