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