CSS实例(一)：漂亮的表格样式

最新推荐文章于 2024-08-23 15:54:50 发布

iteye_19603

最新推荐文章于 2024-08-23 15:54:50 发布

阅读量2.7k

点赞数

文章标签： java 测试 javascript ViewUI

WEB2.0提倡使用div布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。
现在使用介绍使用CSS样式表来控制、美化表格的方法。

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>精美的表格样式</title>
<styletype="text/css">...
<!--
body,table{...}{
font-size:12px;
}
table{...}{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
margin:0auto;
}
td{...}{
height:20px;
}
h1,h2,h3{...}{
font-size:12px;
margin:0;
padding:0;
}
.title{...}{background:#FFF;border:1pxsolid#9DB3C5;padding:1px;width:90%;margin:20pxauto;}
.titleh1{...}{line-height:31px;text-align:center;background:#2F589Curl(th_bg2.gif);background-repeat:repeat-x;background-position:00;color:#FFF;}
.titleth,.titletd{...}{border:1pxsolid#CAD9EA;padding:5px;}
/**//*这个是借鉴一个论坛的样式*/
table.t1{...}{
border:1pxsolid#cad9ea;
color:#666;
}
table.t1th{...}{
background-image:url(th_bg1.gif);
background-repeat::repeat-x;
height:30px;
}
table.t1td,table.t1th{...}{
border:1pxsolid#cad9ea;
padding:01em0;
}
table.t1tr.a1{...}{
background-color:#f5fafe;
}
table.t2{...}{
border:1pxsolid#9db3c5;
color:#666;
}
table.t2th{...}{
background-image:url(th_bg2.gif);
background-repeat::repeat-x;
height:30px;
color:#fff;
}
table.t2td{...}{
border:1pxdotted#cad9ea;
padding:02px0;
}
table.t2th{...}{
border:1pxsolid#a7d1fd;
padding:02px0;
}
table.t2tr.a1{...}{
background-color:#e8f3fd;
}
table.t3{...}{
border:1pxsolid#fc58a6;
color:#720337;
}
table.t3th{...}{
background-image:url(th_bg3.gif);
background-repeat::repeat-x;
height:30px;
color:#35031b;
}
table.t3td{...}{
border:1pxdashed#feb8d9;
padding:01.5em0;
}
table.t3th{...}{
border:1pxsolid#b9f9dc;
padding:02px0;
}
table.t3tr.a1{...}{
background-color:#fbd8e8;
}
-->
</style>
<scripttype="text/javascript">...
functionApplyStyle(s)...{
document.getElementById("mytab").className=s.innerText;
}
</script>
</head>
<body>
<divclass="title">
<h1>大家好，CSS与表格的结合示例</h1>
<table><tr><td>
点击链接切换样式：<ahref="javascript:;"onclick="ApplyStyle(this)">t1</a>
<ahref="javascript:;"onclick="ApplyStyle(this)">t2</a>
<ahref="javascript:;"onclick="ApplyStyle(this)">t3</a>
</td></tr></table>
</div>
<tablewidth="90%"id="mytab"border="1"class="t1">
<thead>
<thwidth="10%">网名</th>
<thwidth="30%">博客</th>
<thwidth="20%">电邮</th>
<thwidth="30%">网络硬盘</th>
<thwidth="10%">QQ</th>
</thead>
<trclass="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>
<trclass="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>
<trclass="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>
<trclass="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>

iteye_19603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例(一)：漂亮的表格样式

WEB2.0提倡使用div布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。现在使用介绍使用CSS样式表来控制、美化表格的方法。Html代码 &lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
复制链接

扫一扫