本文主要包含table,样式,结构等相关知识,佚名 希望在学习及工作中可以帮助到您
但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用table实现远比用div实现起来简单明了.当然,本文不是为table平反的, 我只是想告诉大家如何最大限度的分离table的样式与结构.
分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
请看下图:
这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>最大限度的分离table的样式与结构~@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 href="http://mrthink.net/">Mr.Think的个人博客</a> @专注前端技术,热爱PHP,崇尚简单生活.</h1> <table id="itab"> <caption>最大限度的分离table的样式与结构,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>扩展阅读</strong><a href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> </body> </html>
提示：您可以先修改部分代码再运行
下面是核心代码分析：
HTML代码:
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.
分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
请看下图:
这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>最大限度的分离table的样式与结构~@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 href="http://mrthink.net/">Mr.Think的个人博客</a> @专注前端技术,热爱PHP,崇尚简单生活.</h1> <table id="itab"> <caption>最大限度的分离table的样式与结构,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>扩展阅读</strong><a href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> </body> </html>
提示：您可以先修改部分代码再运行
下面是核心代码分析：
HTML代码:
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.