最大限度的分离table的样式与结构
发布时间：2010-07-04 17:18: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中分离出来.
请看下图:
这是一个有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>
CSS代码:
table#itab{border-collapse:collapse; 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 td{padding-left:0.8em}
#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}
如此一看,是不是明了很多.无非是把表格结构化,然后充分利用thead,th,tfoot等table私有属性定义不同的样式.这里不得不提一下colgroup标签,在本文DEMO中,它起到了很重要的作用.但个人认为,它也只能做一些定宽背景定义.它有一个很致命的弱点,不兼容. 比如用它来给列定义字体颜色,ie6下是正常,但其他浏览器好像都是不支持的(如果一定要用它来定义列的字体颜色和对齐方式,可以利用CSS高级选择器first-child为ie6外的浏览器定义样式,暂不详述).但不可否认colgroup是一个很实用的标签.
表格样式的分离,个人觉得完全用CSS分离也不是一个明智的选择,当有些效果CSS无法实现时,或者实现起来比较麻烦时,我们完全可以用JavaScript来实现你想呈现的效果.比如隔行换色,鼠标划过变色等效果(可扩展阅读奇或偶数行高亮显示及鼠标划过高亮显示类).
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.
分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
请看下图:
这是一个有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>
CSS代码:
复制代码
代码如下:table#itab{border-collapse:collapse; 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 td{padding-left:0.8em}
#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}
如此一看,是不是明了很多.无非是把表格结构化,然后充分利用thead,th,tfoot等table私有属性定义不同的样式.这里不得不提一下colgroup标签,在本文DEMO中,它起到了很重要的作用.但个人认为,它也只能做一些定宽背景定义.它有一个很致命的弱点,不兼容. 比如用它来给列定义字体颜色,ie6下是正常,但其他浏览器好像都是不支持的(如果一定要用它来定义列的字体颜色和对齐方式,可以利用CSS高级选择器first-child为ie6外的浏览器定义样式,暂不详述).但不可否认colgroup是一个很实用的标签.
表格样式的分离,个人觉得完全用CSS分离也不是一个明智的选择,当有些效果CSS无法实现时,或者实现起来比较麻烦时,我们完全可以用JavaScript来实现你想呈现的效果.比如隔行换色,鼠标划过变色等效果(可扩展阅读奇或偶数行高亮显示及鼠标划过高亮显示类).
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.
相关文章
- CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋2025-04-16
- CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们2025-04-07
- will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧2025-04-07
- 本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-04-07
在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将2025-04-07css中的 vertical-align与line-height作用详解
文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧2025-03-26浅析CSS 中z - index属性的作用及在什么情况下会失效
z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用2025-03-21- 文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等2025-03-18
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)
本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起2025-03-10
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)
本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外2025-02-26
最新评论