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

Question

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

淡蓝色表格样式

示例表格

城市	区号	邮编
成都	028	610000
北京	010	100000
上海	021	200000
深圳	0755	518000
香港	+852	999077

/* 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
}

粉色表格样式

示例表格

城市	区号	邮编
成都	028	610000
北京	010	100000
上海	021	200000
深圳	0755	518000
香港	+852	999077

/* 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
}

绿色表格样式

示例表格

城市	区号	邮编
成都	028	610000
北京	010	100000
上海	021	200000
深圳	0755	518000
香港	+852	999077

/* 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
}

紫色表格样式

示例表格

城市	区号	邮编
成都	028	610000
北京	010	100000
上海	021	200000
深圳	0755	518000
香港	+852	999077

/* 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即可拥有这些好看的表格样式，当然好看的不仅仅只有这么写，期待你有更多样式可分享。

Answer 1

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