html css实现可下来的自定义表格,变化多端 – 多种纯CSS的HTML表格设计

介绍

在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的形式。

PositionMovieYear of Release

1Citizen Kane19412The Godfather19723Casablanca19424Raging Bull19805Singin’ In The Rain1952

1.    传统网格状表格

效果

CSS代码

table {

border