漂亮CSS表格(Table)，最后一行是汇总行【实例】
本文给大家介绍一个漂亮的CSS价格表格，它与其他表格的不同在于，它最后一行是汇总行，在背景颜色和文字大小上要有所突出。
CSS价格表格
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: sans-serif;
}
table {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin:0 auto;
margin-top:30px;
}
caption {
text-align: left;
color: silver;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
}
thead {
background: SteelBlue;
color: white;
}
th,
td {
padding: 5px 10px;
}
tbody tr:nth-child(even) {
background: WhiteSmoke;
}
tbody tr td:nth-child(2) {
text-align:center;
}
tbody tr td:nth-child(3),
tbody tr td:nth-child(4) {
text-align: right;
font-family: monospace;
}
tfoot {
background: SeaGreen;
color: white;
text-align: right;
}
tfoot tr th:last-child {
font-family: monospace;
}
</style>
</head>
<body>
<table>
<caption>露营开支</caption>
<thead>
<tr>
<th>项目</th>
<th>数量</th>
<th>价格</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>帐篷</td>
<td>1</td>
<td>$279.00</td>
<td>$279.00</td>
</tr>
<tr>
<td>睡袋</td>
<td>2</td>
<td>$159.95</td>
<td>$319.90</td>
</tr>
<tr>
<td>露营椅</td>
<td>2</td>
<td>$39.50</td>
<td>$79.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">总计</th>
<th>$667.90</th>
</tr>
</tfoot>
</table>
</body>
</html>
execcodegetcode
代码分析
下面CSS代码是定义表格头部的背景和文字颜色。
thead {
background: SteelBlue; /* 背景颜色 */
color: white; /* 文字颜色 */
}
下面CSS代码是定义表格最后一行的背景和文字颜色。
tfoot {
background: SeaGreen; /* 背景颜色 */
color: white; /* 文字颜色 */
text-align: right; /* 文字靠右对齐 */
}
相关文章
- 4款简单常见的纯CSS表格(table)样式
- 4款纯CSS实现的响应式表格(Responsive Table)实例
