漂亮的表格效果_效果展示
HTML代码示例
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂亮的表格</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
caption {
font-size: 2em;
font-weight: bold;
margin: 1em 0;
}
th, td {
border: 1px solid #999;
text-align: center;
padding: 20px 0;
}
thead tr {
background-color: #008c8c;
color: #fff;
}
tbody tr:nth-child(odd) {
background-color: #eee;
}
tbody tr:hover {
background-color: #ccc;
}
tbody tr td:first-child {
color: #f40;
}
tfoot tr td {
text-align: right;
padding-right: 20px;
}
</style>
</head>
<body>
<table>
<caption>月度销售报表</caption>
<thead>
<tr>
<th>产品</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品A</td>
<td>100</td>
<td>￥10</td>
<td>￥1000</td>
</tr>
<tr>
<td>产品B</td>
<td>150</td>
<td>￥20</td>
<td>￥3000</td>
</tr>
<!-其他数据行 -->
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>￥4000</td>
</tr>
</tfoot>
</table>
</body>
</html> CSS美化技巧
1、边框和颜色：使用border-collapse: collapse;使边框合并，并设置单元格的边框和背景色，以区分不同层级的数据，主要层级上加边框，明细级数据使用细线条和浅颜色。
2、字体和对齐：选择与表格用途协调的字体风格，确保字体大小和谐统一，通过text-align属性将文本居中对齐，提升整体美观性。
3、伪类选择器：利用:nth-child()伪类选择器为奇数行和偶数行设置不同的背景颜色，增强可读性，悬停状态:hover可以改变行背景色，突出显示当前行。
4、边框样式：通过调整边框的粗细和颜色，以及去掉不必要的网格线，使表格更加简洁大方，可以在重要层级的数据上设置边框或加粗，以强调重点数据。
（图片来源网络，侵删）
5、高级美化：结合边框和填充色进行造型设计，例如纯边框造型、填充色造型及边框+填充色造型，使表格更具特色，还可以尝试去除传统框线，使用圆角矩形等现代设计风格来增加设计感。
效果展示
以下是一个基于上述代码和美化技巧生成的漂亮表格效果示例：
| 产品 | 数量 | 单价 | 总价 |
| 产品A | 100 | ￥10 | ￥1000 |
| 产品B | 150 | ￥20 | ￥3000 |
| ... | ... | ... | ... |
| 总计 | ￥4000 |
该表格通过合理的布局、清晰的结构、和谐的颜色搭配以及细致的美化技巧，呈现出既美观又实用的效果。
（图片来源网络，侵删）
本文来源于互联网，如若侵权，请联系管理员删除，本文链接：https://www.9969.net/62293.html
