CSS table 表格样式-代码号

CSS表格样式指南：提升数据展示的专业性与美观度

CSS表格样式能够显著提升表格信息的可读性，并为原本平淡无奇的HTML表格增添视觉吸引力。通过CSS，我们可以对HTML表格进行多样化样式设计，包括表格边框、行列尺寸、字体颜色以及悬停效果等多种样式调整。

为什么需要CSS表格样式？

在数据分析和信息展示领域，表格是组织数据的重要工具。一个基础的HTML表格缺乏视觉层次和结构感，例如以下简单示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>35</td>
    <td>上海</td>
  </tr>
</table>

这样的表格虽然功能完整，但在视觉上缺乏吸引力，数据可读性也有待提高。

表格结构HTML标签详解

在深入学习CSS表格样式前，需要了解表格的基本HTML结构：

<table>: 定义表格容器
<tr>: 表格行
<td>: 标准单元格
<th>: 表头单元格（默认加粗居中）
<caption>: 表格标题
<thead>: 表格头部区域
<tbody>: 表格主体区域
<tfoot>: 表格底部区域

核心CSS表格属性

1. 边框属性

边框属性是表格样式的基础，控制表格的边界显示：

table, th, td {
  border: 1px solid #ddd;
}

完整示例：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 80%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>课程名称</th>
    <th>学习难度</th>
    <th>建议学时</th>
  </tr>
  <tr>
    <td>HTML基础</td>
    <td>初级</td>
    <td>20小时</td>
  </tr>
  <tr>
    <td>CSS样式</td>
    <td>初级</td>
    <td>30小时</td>
  </tr>
  <tr>
    <td>JavaScript编程</td>
    <td>中级</td>
    <td>50小时</td>
  </tr>
</table>

</body>
</html>

2. 边框折叠属性

控制相邻单元格边框的显示方式：

table {
  border-collapse: collapse; /* 或 separate */
}

对比示例：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 80%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
th, td {
  padding: 12px;
  text-align: left;
}
table.collapse {
  border-collapse: collapse;
}
table.separate {
  border-collapse: separate;
  border-spacing: 5px; /* 仅separate模式下有效 */
}
.bordered th, .bordered td {
  border: 1px solid #ddd;
}
</style>
</head>
<body>

<h3>边框折叠模式</h3>
<table class="collapse bordered">
  <tr>
    <th>编程语言</th>
    <th>应用领域</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>数据分析、人工智能</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>企业级应用开发</td>
  </tr>
</table>

<h3>边框分离模式</h3>
<table class="separate bordered">
  <tr>
    <th>编程语言</th>
    <th>应用领域</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>数据分析、人工智能</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>企业级应用开发</td>
  </tr>
</table>

</body>
</html>

3. 边框间距属性

控制在分离模式下单元格之间的间距：

table {
  border-collapse: separate;
  border-spacing: 10px 5px; /* 水平间距 垂直间距 */
}

4. 标题位置属性

控制表格标题的位置：

caption {
  caption-side: bottom; /* 或 top */
  font-weight: bold;
  padding: 10px;
}

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
caption {
  padding: 10px;
  font-weight: bold;
}
.top-caption {
  caption-side: top;
}
.bottom-caption {
  caption-side: bottom;
}
</style>
</head>
<body>

<table class="top-caption">
  <caption>前端开发技术栈</caption>
  <tr>
    <th>技术类型</th>
    <th>代表技术</th>
  </tr>
  <tr>
    <td>结构层</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>样式层</td>
    <td>CSS</td>
  </tr>
</table>

<table class="bottom-caption">
  <caption>后端开发技术栈</caption>
  <tr>
    <th>技术类型</th>
    <th>代表技术</th>
  </tr>
  <tr>
    <td>服务器语言</td>
    <td>Java, Python, Node.js</td>
  </tr>
  <tr>
    <td>数据库</td>
    <td>MySQL, MongoDB</td>
  </tr>
</table>

</body>
</html>

5. 空单元格显示属性

控制空单元格的边框和背景显示：

table {
  empty-cells: hide; /* 或 show */
}

实用表格样式技巧

斑马纹表格

提高长表格的可读性：

tr:nth-child(even) {
  background-color: #f9f9f9;
}

悬停效果

增强用户交互体验：

tr:hover {
  background-color: #f5f5f5;
}

响应式表格

使表格在不同设备上都能良好显示：

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  th, td {
    padding: 8px;
    display: block;
  }
}

完整示例：专业数据表格

<!DOCTYPE html>
<html>
<head>
<style>
.data-table {
  width: 90%;
  margin: 20px auto;
  border-collapse: collapse;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.data-table th, .data-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.data-table th {
  background-color: #4CAF50;
  color: white;
  font-weight: 600;
}
.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.data-table tr:hover {
  background-color: #f1f1f1;
  transition: background-color 0.3s;
}
.data-table caption {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
</style>
</head>
<body>

<table class="data-table">
  <caption>代码号学习平台课程列表</caption>
  <tr>
    <th>课程名称</th>
    <th>难度级别</th>
    <th>学习人数</th>
    <th>评分</th>
  </tr>
  <tr>
    <td>HTML5基础入门</td>
    <td>初级</td>
    <td>5,243</td>
    <td>4.8</td>
  </tr>
  <tr>
    <td>CSS3现代样式技术</td>
    <td>初级</td>
    <td>4,876</td>
    <td>4.7</td>
  </tr>
  <tr>
    <td>JavaScript编程精髓</td>
    <td>中级</td>
    <td>3,954</td>
    <td>4.9</td>
  </tr>
  <tr>
    <td>React前端框架实战</td>
    <td>高级</td>
    <td>2,567</td>
    <td>4.6</td>
  </tr>
</table>

</body>
</html>

本节课程知识要点

CSS表格样式大幅提升数据可读性和视觉吸引力
边框折叠属性决定单元格边框是合并还是分离显示
斑马纹样式和悬停效果增强长表格的用户体验
空单元格显示属性控制是否显示空白单元格的边框
响应式设计确保表格在不同设备上都能正常显示

本文标签：

CSS table 表格样式