按照WEB2.0风格，设计了几个表格样式，希望大家喜欢。
WEB2.0提倡使用div开布局，但不是要全然放弃使用表格，表格在数据展现方面还是不错的选择。
如今使用介绍使用CSS样式表来控制、美化表格的方法。
<! 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://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 > < 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 >
能够到我的网络硬盘下载源代码：http://wallimn.ys168.com
转载于:https://www.cnblogs.com/bhlsheji/p/4558482.html
