[分享]css两个表格 怎么样式

在HTML中，表格是用来展示数据的一种非常方便的方式。不过，默认情况下，表格的样式比较简单，不够美观。这时候，我们可以使用CSS来对表格进行样式设计。下面，我们就来看一下如何利用CSS对两个表格进行样...

在HTML中，表格是用来展示数据的一种非常方便的方式。不过，默认情况下，表格的样式比较简单，不够美观。这时候，我们可以使用CSS来对表格进行样式设计。下面，我们就来看一下如何利用CSS对两个表格进行样式设计。

/* 第一个表格样式 */
table {
  border-collapse: collapse; /* 折叠边框 */
  margin: 20px auto; /* 居中 */
  font-size: 16px; /* 字号 */
}
td, th {
  border: 1px solid #ccc; /* 边框样式 */
  padding: 8px; /* 单元格内边距 */
  text-align: center; /* 内容居中 */
}
th {
  background-color: #eee; /* 表头背景色 */
  font-weight: bold; /* 粗体字 */
}

/* 第二个表格样式 */
table {
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 16px;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
tr:nth-child(even) {
  background-color: #eee; /* 奇数行背景色 */
}
tr:hover {
  background-color: #f5f5f5; /* 鼠标悬停背景色 */
} 

第一个表格样式包括折叠边框、居中、字号、单元格边框样式、单元格内边距、表头背景色和粗体字等样式。而第二个表格样式包括折叠边框、居中、字号、单元格边框样式、单元格内边距、奇数行背景色和鼠标悬停背景色等样式。

通过这样的样式设计，我们可以让表格更加美观、易读，同时也提升了网页的交互性。大家可以根据实际需求，设计出适合自己的表格样式。