漂亮的表格样式–>使用CSS样式表控制表格样式

时间 2019-11-20
标签漂亮表格样式使用 css 控制栏目 CSS 繁體版
原文原文链接
依照WEB2.0风格，设计了几个表格样式，但愿你们喜欢。WEB2.0提倡使用div开布局，但不是要彻底放弃使用表格，表格在数据展示方面仍是不错的选择。如今介绍使用CSS样式表来控制、美化表格的方法。javascript
<!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" />
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<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.tab_css_1{
 border:1px solid #cad9ea;
 color:#666;
}
table.tab_css_1 th {
 background-image: url(th_bg1.gif);
 background-repeat::repeat-x;
 height:30px;
}
table.tab_css_1 td,table.tab_css_1 th{
 border:1px solid #cad9ea;
 padding:0 1em 0;
}
table.tab_css_1 tr.tr_css{
 background-color:#f5fafe;
}
 
//样式二
table.tab_css_2{
 border:1px solid #9db3c5;
 color:#666;
}
table.tab_css_2 th {
 background-image: url(th_bg2.gif);
 background-repeat::repeat-x;
 height:30px;
 color:#fff;
}
table.tab_css_2 td{
 border:1px dotted #cad9ea;
 padding:0 2px 0;
}
table.tab_css_2 th{
 border:1px solid #a7d1fd;
 padding:0 2px 0;
}
table.tab_css_2 tr.tr_css{
 background-color:#e8f3fd;
}
 
//样式三
table.tab_css_3{
 border:1px solid #fc58a6;
 color:#720337;
}
table.tab_css_3 th {
 background-image: url(th_bg3.gif);
 background-repeat::repeat-x;
 height:30px;
 color:#35031b;
}
table.tab_css_3 td{
 border:1px dashed #feb8d9;
 padding:0 1.5em 0;
}
table.tab_css_3 th{
 border:1px solid #b9f9dc;
 padding:0 2px 0;
}
table.tab_css_3 tr.tr_css{
 background-color:#fbd8e8;
}
 
.hover{
   background-color: #53AB38;
   color: #fff;
}
 
-->
</style>
<script type="text/javascript">
 function ApplyStyle(s){
  document.getElementById("mytab").className=s.innerText;
 }
 
 $(function(){
       addHover('mytab');
 });
 
    /**
  * 在鼠标悬停时突出显示行--jQuery处理表格  
  *
  * @tab table id
  */
 function addHover(tab){
    $('#'+tab+' tr').hover(
       function(){
          $(this).find('td').addClass('hover');
       },
    function(){
       $(this).find('td').removeClass('hover');
    }
    );
 }
</script>
</head>
 
<body>
<div class="title">
 <h1>你们好，CSS与表格的结合示例</h1>
 <table><tr><td>
  点击连接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">tab_css_1</a>
  <a href="javascript:;" onclick="ApplyStyle(this)">tab_css_2</a>
  <a href="javascript:;" onclick="ApplyStyle(this)">tab_css_3</a>
 </td></tr></table>
</div>
<table width="90%" id="mytab"  border="1" class="tab_css_1">
  <thead>
    <th width="10%">网名</th>
    <th width="30%">博客</th>
    <th width="20%">电邮</th>
    <th width="10%">QQ</th>
  </thead>
  <tr class="tr_css">
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr>
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr class="tr_css">
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr>
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr class="tr_css">
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr>
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr class="tr_css">
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
  <tr>
    <td>Ruthless</td>
    <td>http://www.tieguanyin168.com/</td>
    <td>416501600@qq.com</td>
    <td>416501600</td>
  </tr>
</table>
 
</body>
</html>