变化多端 – 多种纯CSS的HTML表格设计
2015-08-03 20:00
921 查看
介绍
在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中,一碰到规整的数据显示,不知不觉又会用起它。可见其生命力之顽强。这儿就探讨下几种不同的通过CSS实现的Table设计 。通过JavaScript渲染的效果不在此文讨论范围。表格最终渲染效果在Firefox 36.0或者Safari 8.0.7下实现。很可惜不是所有效果都能同时在两个浏览器中出现。
要说明的是,本文大部分内容可以说是对于
Dudley Storey的博文”CSS Design Patterns For HTML5 Tables”中表格实现的一些整理,偷懒的原因,使用的样例表格也是来自其中。 有兴趣的童鞋可以逛逛他的博客,或者看看他出的书”Pro
CSS3 Animation”(不知道有没有中译本?)。当然根据思路后面也增加了一些本人的实现。
表格的HTML代码
没有特别研究过下面使用的HTML元素及属性是否符合HTML5规范,但设置doctype为支持HTML5的形式。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <table> <caption>American Film Institute’s Top Five Films</caption> <thead> <tr> <th>Position <th>Movie <th>Year of Release </thead> <tbody> <tr> <td>1 <td>Citizen Kane <td>1941 <tr> <td>2 <td>The Godfather <td>1972 <tr> <td>3 <td>Casablanca <td>1942 <tr> <td>4 <td>Raging Bull <td>1980 <tr> <td>5 <td>Singin’ In The Rain <td>1952 </tbody> </table> </body> </html>
1. 传统网格状表格
效果
CSS代码
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; margin: 1em auto; } th,td { padding: .65em; } th { background: #555 nonerepeat scroll 0 0; border: 1px solid #777; color: #fff; } td { border: 1px solid#777; }
说明
几个要注意的地方:- 当渲染网格状表格时,往往说明对每个格子要加上边框。因此对于<th>, <td>,都要加上border属性。可想而知,如果这样的话,每个格子之间会出现两条边框。而我们又希望它们之间的边框只有一条,因此需要设置<table>的border-collapse属性为collapse。
- 表头和表格内容不一样,需要单独渲染。这儿通过设置<th>的background、color属性改变了表头的背景色和文字颜色。
2. 斑马条纹表格
效果
CSS代码
在上面CSS基础上增加以下代码:tbody tr:nth-child(odd) { background: #ccc; }
说明
带有条纹的表格也非常经典。当表格行数较多时,这样的表格比传统网格状表格更能看得清楚。这个效果就是通过在<tr>上调用CSS选择器nth-child(odd)完成的。这儿的传入参数可以是一个表达式(an+b),或者build-in的函数,比如odd表示奇数(2n+1),而even是偶数(2n)。3. 圆角表格
效果
CSS代码
table {
border-collapse: collapse;
font-family: Futura, Arial, sans-serif;
}
caption {
font-size: larger;
margin: 1em auto;
}
th,td {
padding: .65em;
}
th {
background: #555 nonerepeat scroll 0 0;
/* border: 1px solid #777; */
color: #fff;
}
td {
/* border: 1px solid #777; */
}
tbody tr:nth-child(odd) { background: #ccc; }
th:first-child {
border-radius: 9px 0 0 0;
}
th:last-child {
border-radius: 0 9px 0 0;
}
tr:last-child td:first-child {
border-radius: 0 0 0 9px;
}
tr:last-child td:last-child {
border-radius: 0 0 9px 0;
}
说明
从最后面几个CSS 来看,圆角主要通过border-radius属性实现。选择的正是表格四个角上的四个<th>/<td>元素。不幸的是,在Firefox中只出现了上面两个圆角效果。Safari中则都渲染出来了。而border-radius属性和border属性并不捆绑,因此要做圆角时,需要将原来的网格线取消。
4. 线型表格
效果
CSS代码
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; margin: 1em auto; } th,td { padding: .65em; } th,td { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; }
说明
这也是非常常用的一种表格设计,多用在展示科学结果上。很多科学论文中往往会用这样的设计方式:简洁、明了。实现的原理也很简单,将原来<th>/<td>上的border属性拆分开来,通过border-top和border-bottom只渲染上下的网格线。当然为了格子之间不出现两条线,每个格子的线还要连到一起,务必设置<table>的border-collapse属性为collapse。5. 表格行上的立体悬停效果
效果
CSS代码
在上面CSS基础上增加以下代码:tbody tr:hover { background: linear-gradient(#fff,#aaa); font-size: 17px; }
说明
总的来说,表格是一种二维呈现,HTML中产生的表格看起来就像和纸上画的一样。但其实它也能实现一些立体的效果,就像这儿展示的,当鼠标悬停在某一行上时,该行突出在渐变的灰色背景上,字体微微变大,有一种被放大的效果。这是通过在<tr>上加上hover选择器,并设置了background属性值为inear-gradient(#fff, #aaa),并增加了font-size。相关文章推荐
- CSS3的一个简单导航栏实现
- 简要总结CSS编程中的响应式设计
- CSS层叠样式表
- 使用CSS3实现选项卡切换的方法
- CSS中关于变量的基本教程
- html css 标签
- CSS3中的clip-path使用攻略
- CSS
- 总结CSS3新特性(Animation篇)
- CSS3实现倒计时
- CSS3动画实现loading加载图标
- 纯CSS3实现一个旋转的3D立方体盒子
- CSS样式属性
- 元素定位方式 之-----CSS属性定位
- CSS3.0盒模型display:-webkit-box;的使用
- html和css学习心得
- 10个CSS简写/优化技巧
- CSS特殊性
- 15-07-26 HTML--样式基本概念、选择器、样式属性
- CSS小技巧