用原生样式装饰表格，让数据展示更具美感

原生CSS样式装饰表格

表格（table）是 HTML 中一种非常重要的元素，它可以用来展示结构化数据。原生 CSS 样式可以帮助我们轻松地对表格进行装饰，使数据展示更具美观性和实用性。

基本样式

最简单的表格装饰就是设置基本样式。我们可以使用CSS样式表（style.css）来定义表格的基本样式，如下所示：

table {
  width: 100%;
  border-collapse: collapse;
}

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

这个样式表将表格设置为100%的宽度，并使表格单元格的边框合并在一起。它还将表格头（th）和表格数据（td）的边框设置为1像素的实线，并为它们设置了8像素的内边距。

边框和背景设置

我们可以使用CSS样式表来设置表格的边框和背景。例如，我们可以将表格的边框设置为2像素的虚线，并将背景颜色设置为浅灰色，如下所示：

table {
  border: 2px dashed #666;
  background-color: #f2f2f2;
}

单元格间距

我们可以使用CSS样式表来设置表格单元格之间的间距。例如，我们可以将单元格之间的水平间距设置为10像素，并将单元格之间的垂直间距设置为5像素，如下所示：

table {
  border-spacing: 10px 5px;
}

对齐方式

我们可以使用CSS样式表来设置表格单元格的对齐方式。例如，我们可以将表格头（th）的文本对齐方式设置为居中，并将表格数据（td）的文本对齐方式设置为靠左，如下所示：

th {
  text-align: center;
}

td {
  text-align: left;
}

颜色设置

我们可以使用CSS样式表来设置表格单元格的文本颜色和背景颜色。例如，我们可以将表格头的文本颜色设置为白色，并将表格数据的文本颜色设置为黑色，如下所示：

th {
  color: #fff;
}

td {
  color: #000;
}

悬停效果

我们可以使用CSS样式表来为表格单元格添加悬停效果。例如，我们可以将表格单元格在鼠标悬停时设置背景颜色为浅绿色，如下所示：

td:hover {
  background-color: #98fb98;
}

结语

原生CSS样式装饰表格是前端开发中常见的工作。通过使用CSS样式表，我们可以轻松地对表格进行装饰，使数据展示更具美观性和实用性。本文介绍了表格的基本样式、边框和背景设置、单元格间距、对齐方式、颜色设置、悬停效果等多个方面的装饰技巧，希望能帮助您掌握原生表格装饰的艺术，并提供多种可用于实际项目的装饰灵感。