分享几个好看的Table表格样式

发布于 2017-05-22 16:35:01 字数 4711 浏览 25599 评论 1

Table表格就是为了展示数据,不过默认的样式实在是太难看了,我们不得不去美化表格,如果使我们自己去想怎么配色,怎么设置表头,确实比较麻烦,看到以下几款款颜色CSS表格样式的整理还是比较好的,尤其是需要在网页中添加表格时候,看似简单的样式,但是在需要使用的时候就直接复制,节省很多时间。

淡蓝色表格样式

示例表格

城市区号邮编
成都028610000
北京010100000
上海021200000
深圳0755518000
香港+852999077
/* Border styles */
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #a8bfde;
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #a8bfde;
}

/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: #5b7da3;
}

/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: #d3dfed
}
#table-1 tr:nth-child(odd) {
background: #FFF
}

粉色表格样式

示例表格

城市区号邮编
成都028610000
北京010100000
上海021200000
深圳0755518000
香港+852999077
/* 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
}

绿色表格样式

示例表格

城市区号邮编
成都028610000
北京010100000
上海021200000
深圳0755518000
香港+852999077
/* 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
}

紫色表格样式

示例表格

城市区号邮编
成都028610000
北京010100000
上海021200000
深圳0755518000
香港+852999077
/* 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
}

怎么样,是不是感觉很好看,那就收藏这篇文章吧,在需要的时候,直接复制到你的网页中,然后添加一个ID即可拥有这些好看的表格样式,当然好看的不仅仅只有这么写,期待你有更多样式可分享。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浮生未歇 2017-11-06 14:53:59 1 楼

这些表格的样式好漂亮,感谢博主分享!

~没有更多了~

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

深爱成瘾

文章 0 评论 0

甜点

文章 0 评论 0

Ss Yy

文章 0 评论 0

dgmis009

文章 0 评论 0

花想c

文章 0 评论 0

樱花落人离去

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。