表格是网站中最常见的元素之一,但传统的表格样式显得单调无味,无法展现出网站内容的重要性。本文将介绍20个CSS表格样式示例,让您的网站内容更加有趣味性,让用户更容易获取网站信息。
一、背景颜色样式
通过改变表格背景颜色,可以使表格更加突出,吸引用户的眼球。下面的示例会使您获得在表格每个单元格增加背景颜色的效果。
table{ border-collapse: collapse; width: 100%; } th, td{ padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even){ background-color: #f2f2f2; } tr:hover{ background-color: #ddd; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
二、边框样式
不同的边框样式也可以让网站中的表格更加突出。下面的样式可以让表格的边框更加醒目。
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 2px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
三、交替行样式
交替行样式是非常受欢迎的表格样式之一,可以使表格看起来更加清晰。下面的样式可以让表格的奇偶行颜色不同。
table{ border-collapse: collapse; width: 100%; } th, td{ padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even){ background-color: #f2f2f2; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
四、滑动特效
滑动特效可以让表格在用户鼠标悬停时变得更加动态。下面的代码可以让表格在悬停时出现滑动特效。
table { border-collapse: collapse; width: 100%; } td, th { border: 2px solid #dddddd; text-align: left; padding: 8px; transition: all 0.3s ease-in-out; } tr:nth-child(even) { background-color: #dddddd; } td:hover { transform: translate(10px); }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
五、斑马纹样式
斑马纹样式也是许多网站中经常使用的一种表格样式。下面的样式可以让表格的斑马纹更加明显。
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; width: 33%; } tr:nth-child(even) { background-color: #dddddd; } tr:nth-child(odd) { background-color: #ffffff; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
六、紧凑型样式
如果网站中的表格内容过多,可以通过使用紧凑的样式将表格展示得更加紧凑,便于用户获取信息。下面的样式是紧凑型样式。
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; font-size: 14px; line-height: 1.5; } tr:nth-child(even){ background-color: #f2f2f2; } tr:hover { background-color: #ddd; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
七、另类颜色样式
这个样式会改变表格的颜色和边框样式,是将表格样式与网站主题协调的一种好方法。
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f1f1f1; } th { background-color: #4CAF50; color: white; } td:first-child { border-left: 1px solid #dddddd; } td:last-child { border-right: 1px solid #dddddd; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
八、悬停样式
表格悬停样式可以让表格更加干净、易于阅读,能够促进用户阅读网站内容,下面的样式可以让当鼠标悬停时出现表格悬停样式。
table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; transition: all 0.3s ease; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; transform: scale(1.01); }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |
九、表格标题样式
表格标题样式可以让表格看起来更加整洁,方便用户获取信息。下面的代码可以增加表格标题样式。
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; font-weight: bold; text-transform: uppercase; }
姓名 | 年龄 | 工作 |
---|---|---|
小明 | 22 | 前端工程师 |
小红 | 25 | UI设计师 |
小华 | 28 | 后端程序员 |