分享7款颜色的CSS表格样式美化网页表格用户体验 - CSDN博客
文章推薦指數： 80 %
转载自：https://www.laozuo.org/4631.html今天老左在浏览几个海外前端博客时候，看到以下7款颜色CSS表格样式的整理还是比较好的，尤其是需要在网页中 ...
分享7款颜色的CSS表格样式美化网页表格用户体验
moxiaoran5753
于 2019-06-0318:13:00 发布
13614
收藏
53
分类专栏：
前端
前端
专栏收录该内容
22篇文章
0订阅
订阅专栏
转载自：https://www.laozuo.org/4631.html
今天老左在浏览几个海外前端博客时候，看到以下7款颜色CSS表格样式的整理还是比较好的，尤其是需要在网页中添加表格时候，看似简单的样式，但是在需要使用的时候就直接复制，节省很多时间。
第一种：
CSS样式代码部分：
/*Borderstyles*/
#table-1thead,#table-1tr{
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);
}
/*Paddingandfontstyle*/
#table-1td,#table-1th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
color:rgb(177,106,104);
}
/*Alternatingbackgroundcolors*/
#table-1tr:nth-child(even){
background:rgb(238,211,210)
}
#table-1tr:nth-child(odd){
background:#FFF
}
第二种：
CSS样式代码部分：
/*Borderstyles*/
#table-2thead,#table-2tr{
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);
}
/*Paddingandfontstyle*/
#table-2td,#table-2th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
color:rgb(177,106,104);
}
/*Alternatingbackgroundcolors*/
#table-2tr:nth-child(even){
background:rgb(238,211,210)
}
#table-2tr:nth-child(odd){
background:#FFF
}
第三种：
CSS样式代码部分：
/*Borderstyles*/
#table-3thead,#table-3tr{
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);
}
/*Paddingandfontstyle*/
#table-3td,#table-3th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
color:rgb(149,170,109);
}
/*Alternatingbackgroundcolors*/
#table-3tr:nth-child(even){
background:rgb(230,238,214)
}
#table-3tr:nth-child(odd){
background:#FFF
}
第四种：
CSS代码样式部分：
/*Borderstyles*/
#table-4thead,#table-4tr{
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);
}
/*Paddingandfontstyle*/
#table-4td,#table-4th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
color:rgb(95,74,121);
}
/*Alternatingbackgroundcolors*/
#table-4tr:nth-child(even){
background:rgb(223,216,232)
}
#table-4tr:nth-child(odd){
background:#FFF
}
第五种：
CSS代码样式部分：
/*TableHead*/
#table-5theadth{
background-color:rgb(156,186,95);
color:#fff;
border-bottom-width:0;
}
/*ColumnStyle*/
#table-5td{
color:#000;
}
/*HeadingandColumnStyle*/
#table-5tr,#table-5th{
border-width:1px;
border-style:solid;
border-color:rgb(156,186,95);
}
/*Paddingandfontstyle*/
#table-5td,#table-5th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
font-weight:bold;
}
第六种：
CSS样式代码部分：
/*TableHead*/
#table-6theadth{
background-color:rgb(128,102,160);
color:#fff;
border-bottom-width:0;
}
/*ColumnStyle*/
#table-6td{
color:#000;
}
/*HeadingandColumnStyle*/
#table-6tr,#table-6th{
border-width:1px;
border-style:solid;
border-color:rgb(128,102,160);
}
/*Paddingandfontstyle*/
#table-6td,#table-6th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
font-weight:bold;
}
第七种：
CSS样式代码部分：
/*TableHead*/
#table-7theadth{
background-color:rgb(81,130,187);
color:#fff;
border-bottom-width:0;
}
/*ColumnStyle*/
#table-7td{
color:#000;
}
/*HeadingandColumnStyle*/
#table-7tr,#table-7th{
border-width:1px;
border-style:solid;
border-color:rgb(81,130,187);
}
/*Paddingandfontstyle*/
#table-7td,#table-7th{
padding:5px10px;
font-size:12px;
font-family:Verdana;
font-weight:bold;
}
以上7种颜色的CSS表格样式部分，根据我们自己的需要可以直接复制不同的颜色部分加上行列的修改。
然后加在下面的TABLE表格部分中：
Name
City
Phone
AlbertEllis
NewYork
+1718000000
MarcusAurelius
Rome
+1718000000
Epictetus
Greece
+1718000000
moxiaoran5753
关注
关注
7
点赞
踩
0
评论
53
收藏
扫一扫，分享内容
点击复制链接
专栏目录
CSS开发过程中的20个快速提升技巧
华为云官方博客
02-05
1273
摘要：本文涵盖了20个CSS技巧，可以解决许多工作中常见的问题，让你也成为一个CSS高手。Aristotle
Greece
+1718000000
1、使用CSS重置（reset）
css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。
大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。
*{box-sizing:border-box;margin:0;padding:0}
纯CSS3漂亮表格（圆角、渐变、多背景色）.rar
07-10
纯CSS3实现一款漂亮的表格效果，具有圆角、渐变、多背景色的特点，最初是在国外网站发现的，自己模拟出来了，不兼容IE8，在IE9/火狐/Chrome以及Safari下完美表现，具体效果请参见演示截图。
参与评论
您还未登录，请先
登录
后发表或查看评论
H5表单美化
10-26
h5+css3做的表单美化，方便修改，快来试试吧！！！！！！！！！
[H5]HTML5样式、链接和表格
Gamin
01-28
5384
[H5]HTML5样式、链接和表格
延伸文章資訊
- 1簡單CSS語法美化Table表格底色奇數偶數相間-2022年最推薦 ...
我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化。今天要教大家的是僅透過簡單的CSS語法，來讓Table表格 ...
- 2簡單到不行的美化網頁技巧（一）、表格的美化
OOPS! 好醜是吧？ 讓我們用一些CSS美化一下，美化之前，把每個元素（<table>,<tr>, ...
- 3CSS table表格美化 - IT人
所以，實際應用中通常會對其進行美化操作，下面分享一段CSS美化案例。 程式碼如下：. [HTML] 純文字檢視複製程式碼執行程式碼. <!DOCTYPE html> <html> ...
- 4html用css美化表格的方法- web开发 - 亿速云
html用css美化表格的方法：首先创建一个HTML示例文件；然后在body中创建table表格；最后通过style标签给表格添加css样式即可。 html如何用css美化表格？
- 5我再也不畫表格了！ - Word to HTML 線上工具 - iT 邦幫忙
不知道各位網頁設計師，在製作設計稿的時候，有沒有遇過需要設計的表格內容超級多！ ... 關於表格的一些css 美化設定可以看這篇文章：css美化表格和表單樣式.
