介绍
在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。
转载请注明本文地址: 变化多端 – 多种纯CSS的HTML表格设计