变化多端 – 多种纯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的形式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<table>
	
  • 11
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值