首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 范文大全 > 正文

    最大限度的分离table的样式与结构_table 样式

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    用table布局,相信大家都知道这是前端很诟病的事.但从HTML标签角度来看table标签,它的功能强大也是毋庸置疑的, 不然, 它也不会曾主导网站布局模式数年(甚至于现在仍有N多整站用table布局的网站). 但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用table实现远比用div实现起来简单明了.当然,本文不是为table平反的, 我只是想告诉大家如何最大限度的分离table的样式与结构.
    分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
    请看下图:
    最大限度的分离table的样式与结构1
    这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.
    HTML代码:

    <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>
    • 最大限度的分离table的样式与结构_table 样式 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文最大限度的分离table的样式与结构_table 样式由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.