CSS控制表格的方法
生活随笔
收集整理的這篇文章主要介紹了
CSS控制表格的方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
現(xiàn)在的網(wǎng)頁都是DIV+CSS來布局的，table布局時(shí)代早已經(jīng)結(jié)束了，那table還能干什么呢？ 當(dāng)然是現(xiàn)實(shí)數(shù)據(jù)了，這才是他的本事！
表格框架要和CSS分離，還table純結(jié)構(gòu)，需要琢磨一下，下面是一個(gè)細(xì)邊框的表格示例：
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; /* 關(guān)鍵屬性：合并表格內(nèi)外邊框(其實(shí)表格邊框有2px，外面1px，里面還有1px哦) */ 10 border: solid #00F; /* 設(shè)置表格邊框?qū)傩?#xff1b;樣式(solid=實(shí)線)、顏色(#999=灰) */ 11 border-width: 1px 0 0 1px; /* 設(shè)置邊框狀粗細(xì)：上 右 下 左 = 對(duì)應(yīng)：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>網(wǎng)址</th> 38 <th>時(shí)間</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>網(wǎng)址</th> 73 <th>時(shí)間</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>轉(zhuǎn)載于:https://www.cnblogs.com/wanghaibin/articles/2515923.html
總結(jié)
以上是生活随笔為你收集整理的CSS控制表格的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 堆优先级队列
- 下一篇： CSS文件可维护、可读性提高指南第2/2