漂亮html表格页面模板,四款好看实用的CSS表格样式分享
为了让用户拥有更好的阅读体验,将文章中数据以更直观的方式展示是非常必要的,因此,拥有良好的表格设计就显得非常重要了。下面,w3cschool就和大家分享4款好看且实用的CSS表格样式。
具体操作:直接复制粘贴后即可在浏览器打开显示
1. 单像素边框CSS表格
这是一个简单但是常用的表格样式。
源代码:
实例
table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}
table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}
table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}
尝试一下 »
2. 带背景图的CSS样式表格
这个样式和和上面的差不多,只是多了背景图,的视觉上会好看不少。
源代码:
实例
table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}
table.imagetable th {background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}
table.imagetable td {background:#dcddc0 url('cell-grey.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}
尝试一下 »
3. 自动换整行颜色的CSS样式表格(需要用到JS)
这个CSS表格会自动切换每一行的颜色,这种呈现方式,在我们编辑一个数据庞大的表格时,非常好用。
源代码:
实例
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");for(i = 0; i
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}}}}
window.οnlοad=function(){
altRows('alternatecolor');}
尝试一下 »
4. 鼠标悬停高亮的CSS样式表格 (需要JS)
纯CSS显示表格高亮在IE中显示有问题,所以这边使用了JS来做高亮。
注意:不要定义格子的背景色。
源代码:
实例
table.hovertable tr {
background-color:#d4e3e5;}
尝试一下 »
以上是w3cschool为大家推荐的几种比较常见和常用的CSS表格样式了,希望大家喜欢。
漂亮html表格页面模板,四款好看实用的CSS表格样式分享相关推荐
- 四款好看实用的CSS表格样式分享
文章参考: https://www.w3cschool.cn/css/css-sfrk2opy.html https://www.php.cn/css-tutorial-375461.html htt ...
- 5款好看实用的网站404页面源码模板
简介: 5款好看实用的网站404页面源码模板 网盘下载地址: http://kekewangLuo.cc/z1miRptsG0I0 图片:
- 最常用计算机和手机软件,四款简洁实用的手机app和电脑软件,一定符合你的要求...
原标题:四款简洁实用的手机app和电脑软件,一定符合你的要求 一个木函 一个木函是一款优秀的黑科技手机软件. 功能特别强大,可以说一个顶十个,整体界面非常的简没有任何广告,支持搜图.取色器.工具箱.氢 ...
- 哪些蓝牙耳机好用?四款好看耐用的蓝牙耳机推荐
不一样的个体是适合使用不同类型的耳机的,因为大家所追求的功能和性能都是不一样的.比如说,有些人追求耳机的颜值,只要带着好看,其他的并不重要.而有些人则注重蓄电量.持久力.还有些人注重于佩戴起来的舒适度 ...
- 这四款超级实用的PC软件,你还没用过吗?
本文将为大家推荐4款超级实用的电脑软件,快来一起看看吧! 1.Billfish 你还在为电脑里杂乱无章,遍地都是的素材苦恼吗?Billfish是一款非常实用的素材管理软件,它可以收集整理在创意设计中涉 ...
- 三八节送女生什么礼物好?四款好看的蓝牙耳机推荐
市面上的蓝牙耳机层出不穷,如果你想要去购买,但又对这个产品不熟悉时,你会一个个的去看网上的那些评论,但评论的真假我们就不得而知了,因为真的很难去分辨.为此,我特意推荐四款还不错的蓝牙耳机,这些耳机无论 ...
- html表格制作旅游网页,简单实用的网页表格特效_html
在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍几中特效表格的制作方法. 一.彩色虚线表格 .tab1 { border-top-width: ...
- 表格内容居中css样式,css表格中的内容如何居中?css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
- 四款小众实用的办公神器软件,值得你去收藏
一个木函 一个木函是一款工具类的软件. 它的体积只有1M左右,功能上却非常强大,非常丰富,主要的功能有GIF合成.图片拼接.磁力搜索.视频中音频提取.二维码生产等功能,整体上界面非常简洁,没有任何广告 ...
- 偷偷告诉你四款好玩实用的电脑软件让你嗨翻天
不管是学习.工作.生活中,在使用自己电脑的时候,肯定特别希望可以下载一些好玩又不失实用的电脑软件,今天就来给大家分享福利了,希望你们喜欢! Everything Everything是一款文件.文件夹 ...
最新文章
- python新手教程 从零开始-Python零基础从零开始学习Python十分钟快速入门
- Oracle中删除数据的一个小技巧
- 重构:改善既有代码的设计(评注版) 评注者序
- java实现对大文件切割下载_Java实现大文件的切割与合并操作示例
- RecyclerView实现滑动删除和拖拽功能
- android 短信优先级,Android-消息机制
- 在window10上安装miniconda
- redhat最小化安装是多少包_Linux的最小化安装
- 大一c语言常见编程题,自己整理的C语言常见编程题
- ROS下使用摄像头进行机器人巡线功能(附带功能包链接)
- Visual Studio 2013下载及其安装
- 关于microsoft html help workshop的一些草蛋问题
- 拼写检查工具是android,Android拼写检查器
- MySQL8.0 - 新特性 - Descending Index
- 关于多线程爬取小说排序混乱的问题
- python如何写生日快乐说说_抖音上很火的生日句子,适合过生日发的高逼格
- 寒假思雨姐摸底A题,题解
- 元宇宙密室逃脱游戏攻略来啦!
- 使用Cpoly.f90注意事项
- 常用软件官网下载链接汇总
热门文章
- JavaScript案例分享+复盘——小米闪购界面
- 【Axure】Axure RP 9 下载、短期试用破解安装和汉化步骤 —— 可供安装参考,短期试用,目前授权码已逐渐失效
- 西门子s300编程实例_数控车床加工编程典型实例分析(西门子802S数控系统编程教学)...
- 离线网页地图开发-详细开发过程
- linux—vi编辑器常用命令
- Go编程语言能干什么
- 使用javascript、Ajax制作前端拟态风格天气预报功能
- python websocket爬虫_python根据websocket抓取斗鱼弹幕和礼物消息
- Redis客户端工具如何连接宝塔Redis服务器
- 计算机软考高级论文,非IT专业,写论文太难了!怎么一次考过软考高项?