本文为大家展示了几款美观的表格样式，希望大家可以喜欢。
1、单像素边框CSS表格
table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}
登录后复制
Info Header 1 Info Header 2 Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2C
（视频教程推荐：css视频教程）
2、带背景图的CSS样式表格
立即学习“前端免费学习笔记（深入）”；
table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}table.imagetable th {background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}table.imagetable td {background:#dcddc0 url('cell-grey.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}
登录后复制
Info Header 1 Info Header 2 Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2C
3、自动换整行颜色的CSS样式表格（需要用到JS）
function altRows(id){if(document.getElementsByTagName){ var table = document.getElementById(id); var rows = table.getElementsByTagName("tr"); for(i = 0; i < rows.length; i++){ if(i % 2 == 0){rows[i].className = "evenrowcolor";}else{rows[i].className = "oddrowcolor";} }}} window.οnlοad=function(){altRows('alternatecolor');} table.altrowstable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #a9c6c9;border-collapse: collapse;}table.altrowstable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}table.altrowstable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}.oddrowcolor{background-color:#d4e3e5;}.evenrowcolor{background-color:#c3dde0;}
登录后复制
Info Header 1 Info Header 2 Info Header 3Text 1AText 1BText 1CText 2AText 2BText 2CText 3AText 3BText 3CText 4AText 4BText 4CText 5AText 5BText 5C
4、鼠标悬停高亮的CSS样式表格 (需要JS)
table.hovertable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}table.hovertable th {background-color:#c3dde0;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}table.hovertable tr {background-color:#d4e3e5;}table.hovertable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;}
登录后复制
Info Header 1 Info Header 2 Info Header 3Item 1AItem 1BItem 1CItem 2AItem 2BItem 2CItem 3AItem 3BItem 3CItem 4AItem 4BItem 4CItem 5AItem 5BItem 5C
推荐教程：css视频教程
以上就是利用css实现的表格样式展示的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2885724.html
