CSS实例(一)：漂亮的表格样式
2013-08-19 21:53
399 查看
WEB2.0提倡使用div布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。
现在使用介绍使用CSS样式表来控制、美化表格的方法。
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精美的表格样式</title>
<style type="text/css">...
<!--
body,table{...}{
font-size:12px;
}
table{...}{
table-layout:fixed;
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
td{...}{
height:20px;
}
h1,h2,h3{...}{
font-size:12px;
margin:0;
padding:0;
}
.title {...}{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
.title h1 {...}{ line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
.title th, .title td {...}{ border: 1px solid #CAD9EA; padding: 5px; }
/**//*这个是借鉴一个论坛的样式*/
table.t1{...}{
border:1px solid #cad9ea;
color:#666;
}
table.t1 th {...}{
background-image: url(th_bg1.gif);
background-repeat::repeat-x;
height:30px;
}
table.t1 td,table.t1 th{...}{
border:1px solid #cad9ea;
padding:0 1em 0;
}
table.t1 tr.a1{...}{
background-color:#f5fafe;
}
table.t2{...}{
border:1px solid #9db3c5;
color:#666;
}
table.t2 th {...}{
background-image: url(th_bg2.gif);
background-repeat::repeat-x;
height:30px;
color:#fff;
}
table.t2 td{...}{
border:1px dotted #cad9ea;
padding:0 2px 0;
}
table.t2 th{...}{
border:1px solid #a7d1fd;
padding:0 2px 0;
}
table.t2 tr.a1{...}{
background-color:#e8f3fd;
}
table.t3{...}{
border:1px solid #fc58a6;
color:#720337;
}
table.t3 th {...}{
background-image: url(th_bg3.gif);
background-repeat::repeat-x;
height:30px;
color:#35031b;
}
table.t3 td{...}{
border:1px dashed #feb8d9;
padding:0 1.5em 0;
}
table.t3 th{...}{
border:1px solid #b9f9dc;
padding:0 2px 0;
}
table.t3 tr.a1{...}{
background-color:#fbd8e8;
}
-->
</style>
<script type="text/javascript">...
function ApplyStyle(s)...{
document.getElementById("mytab").className=s.innerText;
}
</script>
</head>
<body>
<div class="title">
<h1>大家好，CSS与表格的结合示例</h1>
<table><tr><td>
点击链接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">t1</a>
<a href="javascript:;" onclick="ApplyStyle(this)">t2</a>
<a href="javascript:;" onclick="ApplyStyle(this)">t3</a>
</td></tr></table>
</div>
<table width="90%" id="mytab" border="1" class="t1">
<thead>
<th width="10%">网名</th>
<th width="30%">博客</th>
<th width="20%">电邮</th>
<th width="30%">网络硬盘</th>
<th width="10%">QQ</th>
</thead>
<tr class="a1">
<td>wallimn</td>
<td>http://wallimn.iteye.com</td>
<td>wallimn@tom.com</td>
<td>http://wallimn.ys168.com</td>
<td>54871876</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>wallimn</td>
<td>http://blog.csdn.net/wallimn</td>
<td>wallimn@tom.com</td>
<td>http://wallimn.ys168.com</td>
<td>54871876</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
</table>
</body>
</html>
现在使用介绍使用CSS样式表来控制、美化表格的方法。
Html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精美的表格样式</title>
<style type="text/css">...
<!--
body,table{...}{
font-size:12px;
}
table{...}{
table-layout:fixed;
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
td{...}{
height:20px;
}
h1,h2,h3{...}{
font-size:12px;
margin:0;
padding:0;
}
.title {...}{ background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; }
.title h1 {...}{ line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
.title th, .title td {...}{ border: 1px solid #CAD9EA; padding: 5px; }
/**//*这个是借鉴一个论坛的样式*/
table.t1{...}{
border:1px solid #cad9ea;
color:#666;
}
table.t1 th {...}{
background-image: url(th_bg1.gif);
background-repeat::repeat-x;
height:30px;
}
table.t1 td,table.t1 th{...}{
border:1px solid #cad9ea;
padding:0 1em 0;
}
table.t1 tr.a1{...}{
background-color:#f5fafe;
}
table.t2{...}{
border:1px solid #9db3c5;
color:#666;
}
table.t2 th {...}{
background-image: url(th_bg2.gif);
background-repeat::repeat-x;
height:30px;
color:#fff;
}
table.t2 td{...}{
border:1px dotted #cad9ea;
padding:0 2px 0;
}
table.t2 th{...}{
border:1px solid #a7d1fd;
padding:0 2px 0;
}
table.t2 tr.a1{...}{
background-color:#e8f3fd;
}
table.t3{...}{
border:1px solid #fc58a6;
color:#720337;
}
table.t3 th {...}{
background-image: url(th_bg3.gif);
background-repeat::repeat-x;
height:30px;
color:#35031b;
}
table.t3 td{...}{
border:1px dashed #feb8d9;
padding:0 1.5em 0;
}
table.t3 th{...}{
border:1px solid #b9f9dc;
padding:0 2px 0;
}
table.t3 tr.a1{...}{
background-color:#fbd8e8;
}
-->
</style>
<script type="text/javascript">...
function ApplyStyle(s)...{
document.getElementById("mytab").className=s.innerText;
}
</script>
</head>
<body>
<div class="title">
<h1>大家好，CSS与表格的结合示例</h1>
<table><tr><td>
点击链接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">t1</a>
<a href="javascript:;" onclick="ApplyStyle(this)">t2</a>
<a href="javascript:;" onclick="ApplyStyle(this)">t3</a>
</td></tr></table>
</div>
<table width="90%" id="mytab" border="1" class="t1">
<thead>
<th width="10%">网名</th>
<th width="30%">博客</th>
<th width="20%">电邮</th>
<th width="30%">网络硬盘</th>
<th width="10%">QQ</th>
</thead>
<tr class="a1">
<td>wallimn</td>
<td>http://wallimn.iteye.com</td>
<td>wallimn@tom.com</td>
<td>http://wallimn.ys168.com</td>
<td>54871876</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>wallimn</td>
<td>http://blog.csdn.net/wallimn</td>
<td>wallimn@tom.com</td>
<td>http://wallimn.ys168.com</td>
<td>54871876</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr class="a1">
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
<tr>
<td>长三江</td>
<td>村在</td>
<td>北京天安</td>
<td>东四十条</td>
<td>21345678</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 仿Word自动套用格式使用CSS设置表格样式实例
- css两句话搞定漂亮表格样式
- 8款设计师常用漂亮的HTML CSS表格样式
- CSS实现的清爽、漂亮的表格样式分享
- css漂亮表格样式
- CSS实例：横线样式的输入框
- CSS自适应表格样式
- css文字、文本、表格实例
- 仿Word自动套用格式，用CSS设置表格样式
- 【CSS系列】对表单和数据表格应用样式
- HTML+CSS实例——漂亮的查询部件（一）
- CSS表格样式：圆角，隔行，变色的具体实现
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- CSS样式——边框、背景、表格
- 漂亮的表格样式(使用CSS样式表控制表格样式)
- css应用表格排版td中的文本过长，设置不换行，随内容同行显示样式
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
- css设置表格样式的方法
- css美化Div边框的样式实例
- 一个漂亮的表格样式 适合数据统计