几个好看的Table表格样式--收藏

一、淡蓝色表格样式

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

二、粉色表格样式

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

三、绿色表格样式

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

四、紫色表格样式

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

<table id="table-1" border="0" width="100%">
<thead>
<tr>
<th>城市</th>
<th>区号</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>成都</td>
<td>028</td>
<td>610000</td>
</tr>
<tr>
<td>北京</td>
<td>010</td>
<td>100000</td>
</tr>
<tr>
<td>上海</td>
<td>021</td>
<td>200000</td>
</tr>
<tr>
<td>深圳</td>
<td>0755</td>
<td>518000</td>
</tr>
<tr>
<td>香港</td>
<td>+852</td>
<td>999077</td>
</tr>
</tbody>
</table>

来源：https://www.wenjiangs.com/article/table-style.html