css如何设置表格样式

  • A+
所属分类:web前端
摘要

CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了,使用没有边框的表格来排版,也受到很多设计者的喜爱。下面介绍CSS控制表格的方法,包括表格的颜色、标题、边框、背景等。

WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。

表格常见的应用

表格的颜色

表格的边框

例如

隔行变色

当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。

例如

鼠标经过变色

对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。

例如

下面介绍几个CSS表格的实例

一、单像素边框CSS表格

这是一个很常用的表格样式。

CSS样式、HTML代码

HTML 代码

效果图:css如何设置表格样式

二、带背景图的CSS样式表格

和上面差不多,不过每个格子里多了背景图。

css如何设置表格样式

cell-blue.jpgcss如何设置表格样式

cell-grey.jpg

1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝下面的代码到你想要的地方,记得修改图片url

3、css样式、HTML代码

效果图css如何设置表格样式

三、 自动换整行颜色的CSS样式表格

这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。

代码:

效果图:css如何设置表格样式

四、鼠标悬停高亮的CSS样式表格

代码

效果图:

css如何设置表格样式

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: