表格是网站中最常见的元素之一，但传统的表格样式显得单调无味，无法展现出网站内容的重要性。本文将介绍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 | 后端程序员 |
十、
原创文章，作者：JBCA，如若转载，请注明出处：https://www.506064.com/n/133190.html
原创文章，作者：JBCA，如若转载，请注明出处：https://www.506064.com/n/133190.html
微信扫一扫 
支付宝扫一扫 