漂亮的表格样式(使用CSS样式表控制表格样式)

 

 

依照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" > ...

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 > [email protected] 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 > [email protected] 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