分享7款颜色的CSS表格样式美化网页表格用户体验
原文出处:http://www.laozuo.org/4631.html
老左并不是一名网页设计师,但是经常在博客上捣鼓、修改一些自认为不太好的用户体验也仅仅局限在修改一些简单的CSS样式上,遇到不能解决的问题可以通过搜索查阅文档。随着时间的积累,我们越发感觉到CSS样式的无穷奇妙,比如我们在制作某个表格时候,可以简单的利用CSS样式表的修改变化多样的CSS表格样式。在页面布局和内容分享的时候,表格是比较常用到的,有些时候老左在分享评测内容的时候,为了图省事可能就直接截图,以后可能会多一些样式的分享,这样用户体验以及如果信息有变动可以直接修改,而不是再截图。
在之前博文中,已经有分享过几篇关于CSS表格样式的内容:
16款用户体验优秀的HTML CSS价格表格模板 附演示及下载
8款设计师常用漂亮的HTML CSS表格样式
6款漂亮HTML CSS样式用户留言表单
今天老左在浏览几个海外前端博客时候,看到以下7款颜色CSS表格样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。
第一种:
CSS表格样式之一
CSS样式代码部分:
/* Border styles */ #table-1 thead, #table-1 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(230, 189, 189); } #table-1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(230, 189, 189); }/* Padding and font style */ #table-1 td, #table-1 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(177, 106, 104); }/* Alternating background colors */ #table-1 tr:nth-child(even) { background: rgb(238, 211, 210) } #table-1 tr:nth-child(odd) { background: #FFF }
第二种:
CSS表格样式之二
CSS样式代码部分:
/* Border styles */ #table-2 thead, #table-2 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(230, 189, 189); } #table-2 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(230, 189, 189); }/* Padding and font style */ #table-2 td, #table-2 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(177, 106, 104); }/* Alternating background colors */ #table-2 tr:nth-child(even) { background: rgb(238, 211, 210) } #table-2 tr:nth-child(odd) { background: #FFF }
第三种:
CSS表格样式之三
CSS样式代码部分:
/* Border styles */ #table-3 thead, #table-3 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(235, 242, 224); } #table-3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(235, 242, 224); }/* Padding and font style */ #table-3 td, #table-3 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(149, 170, 109); }/* Alternating background colors */ #table-3 tr:nth-child(even) { background: rgb(230, 238, 214) } #table-3 tr:nth-child(odd) { background: #FFF }
第四种:
CSS表格样式之四
CSS代码样式部分:
/* Border styles */ #table-4 thead, #table-4 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(211, 202, 221); } #table-4 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(211, 202, 221); }/* Padding and font style */ #table-4 td, #table-4 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(95, 74, 121); }/* Alternating background colors */ #table-4 tr:nth-child(even) { background: rgb(223, 216, 232) } #table-4 tr:nth-child(odd) { background: #FFF }
第五种:
CSS表格样式之五
CSS代码样式部分:
/* Table Head */ #table-5 thead th { background-color: rgb(156, 186, 95); color: #fff; border-bottom-width: 0; }/* Column Style */ #table-5 td { color: #000; } /* Heading and Column Style */ #table-5 tr, #table-5 th { border-width: 1px; border-style: solid; border-color: rgb(156, 186, 95); }/* Padding and font style */ #table-5 td, #table-5 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }
第六种:
CSS表格样式之六
CSS样式代码部分:
/* Table Head */ #table-6 thead th { background-color: rgb(128, 102, 160); color: #fff; border-bottom-width: 0; }/* Column Style */ #table-6 td { color: #000; } /* Heading and Column Style */ #table-6 tr, #table-6 th { border-width: 1px; border-style: solid; border-color: rgb(128, 102, 160); }/* Padding and font style */ #table-6 td, #table-6 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }
第七种:
CSS表格样式之七
CSS样式代码部分:
/* Table Head */ #table-7 thead th { background-color: rgb(81, 130, 187); color: #fff; border-bottom-width: 0; }/* Column Style */ #table-7 td { color: #000; } /* Heading and Column Style */ #table-7 tr, #table-7 th { border-width: 1px; border-style: solid; border-color: rgb(81, 130, 187); }/* Padding and font style */ #table-7 td, #table-7 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }
以上7种颜色的CSS表格样式部分,根据我们自己的需要可以直接复制不同的颜色部分加上行列的修改。然后加在下面的TABLE表格部分中:
<table id="table-1"> <!-- Replace "table-1" with any of the design numbers --> <thead> <th>Name</th> <th>City</th> <th>Phone</th> </thead> <tbody> <tr> <td>Albert Ellis</td> <td>New York</td> <td>+1 718 000000</td> </tr> <tr> <td>Marcus Aurelius</td> <td>Rome</td> <td>+1 718 000000</td> </tr> <tr> <td>Epictetus</td> <td>Greece</td> <td>+1 718 000000</td> </tr> <tr> <td>Aristotle</td> <td>Greece</td> <td>+1 718 000000</td> </tr> </tbody> </table>
这个文档中整体框架还是用的TABLE,比较适合文章内容中插入样式的部分使用。
分享7款颜色的CSS表格样式美化网页表格用户体验相关推荐
- 二十款漂亮的CSS字体样式,让你受用非浅
二十款漂亮的CSS字体样式,让你受用非浅 平时对于网站整站的字体风格常常很纠结,纠结到底用什么样式才行,才好看,后来在网上搜集收到二十种我认为很漂亮的字体样式并使用,感觉很美观,解决了我以前的纠结.具 ...
- CSS前端样式美化总结
css按钮样式美化 .login-button { /* 按钮美化 */ width: 270px; /* 宽度 */ height: 40px; /* 高度 */ borde ...
- C#Winform的DataGridView控件使用详解2—DataGridView表格样式设置及表格操作
C#Winform的DataGridView控件使用详解2-DataGridView表格样式设置及表格操作 DataGridView表格样式设置 DataGridView行序号设置 右键弹出控件表格操 ...
- CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用 能让几个文字或者某个词语凸显出来 属于行内元素 div标签 属于块级元素 程序示 ...
- 分享10款漂亮的css按钮源码
1.Plastic Buttons 地址:https://codepen.io/ben_jammin/pen/syaCq 这组按钮设计很干净,它们有许多不同的颜色和尺寸,你可以轻松地重新设计这些按钮. ...
- html设置表格字体样式表,CSS:表格样式(设置表格边框/文字/背景的样式)
使用CSS可以制作出十分精美的表格. 效果图: 代码: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo ...
- 分享10款漂亮的 CSS 按钮源码
翻译 | web前端开发 英文原文 | https://1stwebdesigner.com/free-code-snippets-css-buttons/ 网页设计师已经不必再依赖 Photosho ...
- html 好看的数据表格,CSS制作好看的网页表格
如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1 ...
- html5 自定义表格样式,自定义excel表格样式
虽然excel2007为我们提供了大量的表格套用样式,有部分同学感觉还是满足不了自己的需要,我们可以自定义excel表格样式,让我们的表格样式与众不同,具体操作步骤如下: 1.切换到[开始]选项卡,在 ...
最新文章
- java中io流案例_Java IO流的简单使用 通俗易懂 超详细 【内含案例】
- 数据库-ADONET-在数据集DataSet中使用关系对象DataRelation处理关系
- Spring Framework 核心原理与源码解析-大纲
- pandas 数据集的端到端处理
- 计算机每个人都适合学吗,代码不等于计算机科学:为什么所有人都应该学习编程...
- 银行专业术语解释说明(持续更新)
- 网页版微博HTML解析和提取,爬虫聚焦——以新浪微博为例
- 【数据结构】八种常见数据结构介绍
- 印象笔记如何分享链接_【记录】试用印象笔记最新的笔记分享出页面的功能
- 八爪鱼爬虫采集天猫商品数据教程
- 高通骁龙410e/APQ8016E嵌入式物联网模块芯片
- SWR:最具潜力的 React Hooks 数据请求库
- ❤️爆肝新一代大数据存储宠儿,梳理了2万字 “超硬核” 文章!❤️
- 计算机论文的致谢部分写什么,毕业论文的致谢部分怎么写?
- iOS - 添加代码片段(Code Snippets)
- 音乐播放器android-1.0
- php 根据经纬度获取附近50km的信息,并计算距离
- 新消费品牌如何发力KOL营销
- zscore标准化步骤_z-score的标准化究竟怎么弄?
- 项目管理实战20讲干货总结