分享7款颜色的CSS表格样式美化网页表格用户体验

今天在浏览几个海外前端博客时候,看到以下7款颜色 CSS表格 样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。 第一种: CSS表格样式之一 CSS样式代码部分: /* Border styles */#t

今天在浏览几个海外前端博客时候,看到以下7款颜色CSS表格样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。

第一种:

<a href=CSS表格样式之一" class="alignnone size-full wp-image-4633" height="189" original="https://img.genban.org/allimg/160310/1I2111Q8-0.jpg" src="https://img.genban.org/allimg/160310/1I2111Q8-0.jpg" style="border: 1px solid rgb(222, 222, 222); margin: 0px auto; padding: 4px; display: block;" width="332" />

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表格样式之二

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表格样式之三

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表格样式之四

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表格样式之五

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表格样式之六

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表格样式之七

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,比较适合文章内容中插入样式的部分使用。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

云计算的世界波诡云谲,各大云计算厂家都在拼命的争取用户。阿里云作为国内优秀的云计算厂家也不例外,推出了适合各种用户的优惠工具--阿里云优惠券、阿里云推荐码(推荐码现已停用)等。用户使用这些优惠券可以获得一定的订单折扣,降低了用户上云的开支。
前段时间跟版网的技术对网站全面部署了https,部署后发现网站原有的百度社会化分享组件不显示了。那么怎么让分享功能重新显示了?刚开始我以为把百度的链接直接改为https就能可以,事实上是不行的。百度说的是率先对全网实现了https化,但是自己的产品都不能
原由:添加百度分享代码可以增加网站流量,但彩色图标太突出,容易抢占主题内容眼球。 效果:默认灰化处理,鼠标悬停时去除灰化滤镜显示原来彩色图标 代码: 内部样式表添加: style id=diy_style type=text/css.bdsharebuttonbox a:hover {-webkit-filter:
换上新主题Hstyle以后,倡萌也选择了百度分享,昨晚简单测试一下W3C,发现百度分享调用代码居然不符合W3C标准,google了一下,发现还是有前辈找到了解决办法。话说这个问题早在半年多前就有朋友反馈给百度了,但是至今没有官方的解决方案出来,咋回事呢? 倡
目前来说,使用人数比较多的分享工具应该是JiaThis、bShare和百度分享,今天介绍的是另一个分享工具:分享道。 分享道是一个提供网页地址收藏、分享及发送的WEB2.0按钮工具,网站主只需要获得标准按钮JS代码,嵌入到自己的网站上,就可以拥有该分享功能。
就在昨天(6月7日),百度正式推出网站分享按钮嵌入服务:百度分享。网站浏览者可获得JS代码,方便分享到人人网、分享到开心网、分享到QQ空间、分享到腾讯微博等一系列SNS站点。