网页表格抓取(16款用户体验优秀的CSS价格表格样式演示及下载)
优采云 发布时间: 2021-11-05 17:04网页表格抓取(16款用户体验优秀的CSS价格表格样式演示及下载)
老佐不是网页设计师，但他经常摆弄博客，修改一些他认为不好的用户体验。只限于修改一些简单的 CSS 样式。如果遇到无法解决的问题，可以搜索查阅文档。. 随着时间的推移，我们越来越意识到 CSS 样式的无限奇妙。比如我们在做表格的时候，可以简单的使用CSS样式表来修改和改变各种CSS表格样式。在页面布局和内容分享中，表格是比较常用的。有时候老左在分享评价内容的时候，为了省事，可能会直接截图，以后可能会有更多的分享风格，方便用户体验，如果信息有变化，可以修改直接截图而不是截图。
在之前的博文中，我已经分享了几篇关于 CSS 表格样式的文章：
16 个 HTML CSS 价格表单模板，具有出色的用户体验，提供演示和下载
设计师常用的8种漂亮的HTML和CSS表格样式
6 个漂亮的 HTML CSS 样式用户消息表单
今天在浏览几篇海外前端博客的时候，看到下面这7种颜色的CSS表格样式比较有条理，尤其是需要在网页中添加表格的时候，看似简单的样式，实则需要用到的时候直接copy就可以了，省很多时间。
首先：
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 表部分：
Name
City
Phone
Albert Ellis
New York
+1 718 000000
Marcus Aurelius
Rome
+1 718 000000
Epictetus
Greece
+1 718 000000
Aristotle
Greece
+1 718 000000
本文档整体框架还是采用了TABLE，比较适合文章内容中插入样式的部分。
