[分享]css中定义不同几种表格

在CSS中，我们可以使用不同的属性来定义不同类型的表格。下面是一些可以用于定义表格的常用属性：

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
} 

上面的代码基本上是用来定义每个表格都需要的通用样式。下面将介绍一些特定类型的表格以及如何定义它们的样式。

1. 基本表格

基本表格是最常见的表格类型，通常用于展示简单的数据。使用以下样式可以定义一个基本表格：

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
} 

2. 斑马线表格

斑马线表格是在表格中隔行使用不同的颜色或者样式，使表格更易读。使用以下样式可以定义一个斑马线表格：

table {
  border-collapse: collapse;
  width: 100%;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
} 

3. 带有边框的表格

带有边框的表格是在每个单元格和表头周围添加了一条线，使表格看起来更清晰。使用以下样式可以定义一个带有边框的表格：

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
td, th {
  border: 1px solid #ccc;
  padding: 8px;
} 

4. 卡片式表格

卡片式表格是一种现代风格的表格样式，它使用透明度和阴影来创建半透明的卡片效果。使用以下样式可以定义一个卡片式表格：

table {
  border-collapse: collapse;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  margin: 20px 0;
  width: 100%;
}
td, th {
  border: none;
  padding: 20px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
} 

以上是一些常见的表格类型样式，根据具体情况选择合适的表格样式可以使网页更美观、易读。