CSS控制表格的方法

现在的网页都是DIV+CSS来布局的，table布局时代早已经结束了，那table还能干什么呢？ 当然是现实数据了，这才是他的本事！

表格框架要和CSS分离，还table纯结构，需要琢磨一下，下面是一个细边框的表格示例：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>CSS控制表格的方法</title>
  6 <style type="text/css" media="screen">
  7 <!-- /* PR-CSS */
  8 table.line-table {
  9     border-collapse: collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
 10     border: solid #00F; /* 设置表格边框属性；样式(solid=实线)、颜色(#999=灰) */
 11     border-width: 1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
 12 }
 13 table.line-table caption {
 14     font-size: 14px;
 15     font-weight: bolder;
 16 }
 17 table.line-table th, table.line-table td {
 18     border: solid #F00;
 19     border-width: 0 1px 1px 0;/*巧妙之处*/
 20     padding: 2px 8px;
 21 }
 22 table.line-table tfoot td {
 23     text-align: center;
 24 }
 25 -->
 26 </style>
 27 </head>
 28 
 29 <body>
 30 <table class="line-table">
 31     <caption>
 32     表格头
 33     </caption>
 34     <thead>
 35         <tr>
 36             <th>名称</th>
 37             <th>网址</th>
 38             <th>时间</th>
 39         </tr>
 40     </thead>
 41     <tfoot>
 42         <tr>
 43             <td colspan="3">下一页</td>
 44         </tr>
 45     </tfoot>
 46     <tbody>
 47         <tr>
 48             <th>百度</th>
 49             <td>http://www.baidu.com</td>
 50             <td>2007.01.11</td>
 51         </tr>
 52         <tr>
 53             <th>百度</th>
 54             <td>http://www.baidu.com</td>
 55             <td>2007.01.11</td>
 56         </tr>
 57         <tr>
 58             <th>百度</th>
 59             <td>http://www.baidu.com</td>
 60             <td>2007.01.11</td>
 61         </tr>
 62     </tbody>
 63 </table>
 64 <!--无样式表格-->
 65 <table>
 66     <caption>
 67     表格头
 68     </caption>
 69     <thead>
 70         <tr>
 71             <th>名称</th>
 72             <th>网址</th>
 73             <th>时间</th>
 74         </tr>
 75     </thead>
 76     <tfoot>
 77         <tr>
 78             <td colspan="3">下一页</td>
 79         </tr>
 80     </tfoot>
 81     <tbody>
 82         <tr>
 83             <th>百度</th>
 84             <td>http://www.baidu.com</td>
 85             <td>2007.01.11</td>
 86         </tr>
 87         <tr>
 88             <th>百度</th>
 89             <td>http://www.baidu.com</td>
 90             <td>2007.01.11</td>
 91         </tr>
 92         <tr>
 93             <th>百度</th>
 94             <td>http://www.baidu.com</td>
 95             <td>2007.01.11</td>
 96         </tr>
 97     </tbody>
 98 </table>
 99 </body>
100 </html>

posted @ 2012-05-24 00:38  海阔天空XM  阅读(369)  评论(0)    收藏  举报