4款简单常见的纯CSS表格(table)样式
封面图
•
2025-11-10
•
Html/Css
331
1
1
0
下面是一些**简单常见的纯 CSS 表格(table)样式**,不依赖任何 JavaScript 或框架,仅使用 HTML 和 CSS 实现。这些样式适用于基础的表格展示,适合快速美化网页中的数据表格。 --- ## 📌 1. **基本表格样式** ```html <table class="basic-table"> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table> ``` ```css .basic-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; } .basic-table th, .basic-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ccc; } .basic-table th { background-color: #f2f2f2; } ``` --- ## 📌 2. **带悬停效果的表格** ```html <table class="hover-table"> <tr> <th>产品</th> <th>价格</th> <th>库存</th> </tr> <tr> <td>苹果</td> <td>¥5</td> <td>100</td> </tr> <tr> <td>香蕉</td> <td>¥3</td> <td>50</td> </tr> </table> ``` ```css .hover-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; } .hover-table th, .hover-table td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } .hover-table tr:hover { background-color: #f5f5f5; } ``` --- ## 📌 3. **带边框和背景色的表格** ```html <table class="bordered-table"> <tr> <th>ID</th> <th>名称</th> <th>状态</th> </tr> <tr> <td>1</td> <td>项目A</td> <td>进行中</td> </tr> <tr> <td>2</td> <td>项目B</td> <td>完成</td> </tr> </table> ``` ```css .bordered-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; } .bordered-table th, .bordered-table td { padding: 12px; text-align: left; border: 1px solid #444; } .bordered-table th { background-color: #333; color: white; } .bordered-table tr:nth-child(even) { background-color: #f9f9f9; } ``` --- ## 📌 4. **简洁现代风格的表格** ```html <table class="modern-table"> <tr> <th>姓名</th> <th>邮箱</th> <th>注册日期</th> </tr> <tr> <td>王五</td> <td>wangwu@example.com</td> <td>2024-04-01</td> </tr> <tr> <td>赵六</td> <td>zhaoliu@example.com</td> <td>2024-04-05</td> </tr> </table> ``` ```css .modern-table { width: 100%; border-collapse: collapse; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .modern-table th, .modern-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; } .modern-table th { background-color: #f8f8f8; font-weight: bold; } .modern-table tr:hover { background-color: #f1f1f1; } ``` --- ## ✅ 总结 | 样式类型 | 特点 | |----------|------| | 基本表格 | 简单清晰,适合大多数场景 | | 悬停效果 | 提高可交互性,提升用户体验 | | 带边框和背景色 | 更加视觉区分,适合数据展示 | | 现代风格 | 现代化设计,适合美观需求 | 你可以根据自己的页面风格选择合适的样式,也可以将这些样式组合使用以达到更好的效果。 如果你需要响应式表格、分页表格或动态交互表格,我也可以继续提供帮助!
上一篇:
CentOs下Apache服务器配置SSL证书
下一篇:
VSCode 常用快捷键
标题录入,一次不能超过6条
留言
评论