4款简单常见的纯CSS表格(table)样式

封面图 • 2025-11-10 • Html/Css

下面是一些**简单常见的纯 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;
}
```

---

## ✅ 总结

| 样式类型 | 特点 |
|----------|------|
| 基本表格 | 简单清晰，适合大多数场景 |
| 悬停效果 | 提高可交互性，提升用户体验 |
| 带边框和背景色 | 更加视觉区分，适合数据展示 |
| 现代风格 | 现代化设计，适合美观需求 |

你可以根据自己的页面风格选择合适的样式，也可以将这些样式组合使用以达到更好的效果。

如果你需要响应式表格、分页表格或动态交互表格，我也可以继续提供帮助！