如何发布网络小说,欢乐颂小说结局是什么,管理书籍排行榜

但CSS+XHTML的興起,使很多人開始妖魔化table這一標(biāo)簽,甚至以頁面中是否有table來評(píng)判頁面質(zhì)量,這是不對(duì)的. table也有它存在的作用,很多頁面功能(比如數(shù)據(jù)表格類,表單對(duì)齊等)用table實(shí)現(xiàn)遠(yuǎn)比用div實(shí)現(xiàn)起來簡(jiǎn)單明了.當(dāng)然,本文不是為table平反的, 我只是想告訴大家如何最大限度的分離table的樣式與結(jié)構(gòu).
分離樣式,當(dāng)然離不開CSS,而對(duì)于table標(biāo)簽,還有更多私有HTML屬性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用這些屬性,把樣式從table中分離出來.
請(qǐng)看下圖:

這是一個(gè)有6種背景色的table,如果按常規(guī)的table定義,想必大家都知道這個(gè)表格寫出來該有多麻煩,你得一個(gè)個(gè)單元格的去加樣式,加屬性.其實(shí),上面的效果完全可以有著很明了簡(jiǎn)潔的結(jié)構(gòu),也可以不通過修改html頁面來改變它的樣式.

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>最大限度的分離table的樣式與結(jié)構(gòu)~@Mr.Think</title><style>body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.8em}h1{font-size:1em; font-weight:normal}h1 a{background:#CFF; padding:2px 3px; text-decoration:none}h1 a:hover{background:#eee; text-decoration:underline}table{border-collapse:collapse}table#itab{border:1px solid #999; width:50em; margin:0 auto}#itab caption{font-size:1em; font-weight:normal; color:#a40000}#itab thead{background:#ffc}#itab td,table#itab th{border:1px solid #ccc}#itab tfoot{background:#fcc}#itab .linenum{width:15%; background:#0cf}#itab .id-1{width:20%; background:#cf9}#itab .id-2{width:25%; background:#eee}#itab .id-3{width:30%; background:#9ff}</style></head><body><h1><a >Mr.Think的個(gè)人博客</a>@專注前端技術(shù),熱愛PHP,崇尚簡(jiǎn)單生活.</h1><table id="itab"><caption>最大限度的分離table的樣式與結(jié)構(gòu),Uh Oh!</caption><colgroup><col class="linenum"><col class="id-1"><col class="id-2"><col class="id-3"></colgroup><thead><tr><th>LINENUM</th><th>ID-1</th><th>ID-2</th><th>ID-3</th></tr></thead><tbody><tr><td>1</td><td>A</td><td>CY</td><td>I</td></tr><tr><td>2</td><td>Br</td><td>S</td><td>KMQ</td></tr><tr><td>3</td><td>HTC</td><td>LLI</td><td>P</td></tr><tr><td>4</td><td>ACC</td><td>G</td><td>QO</td></tr><tr><td>5</td><td>Z</td><td>AHD</td><td>M</td></tr></tbody><tfoot><tr><th>LINE.NO</th><th>ID-1</th><th>ID-2</th><th>ID-3</th></tr></tfoot></table><strong>擴(kuò)展閱讀</strong><a >奇或偶數(shù)行高亮顯示及鼠標(biāo)劃過高亮顯示類</a></body></html>

上一篇：老調(diào)重彈的CSS優(yōu)先級(jí)

下一篇：Li list-style-image 圖片垂直居中

發(fā)表評(píng)論

共有條評(píng)論