在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; /* 鼠标悬停背景色 */ }
第一个表格样式包括折叠边框、居中、字号、单元格边框样式、单元格内边距、表头背景色和粗体字等样式。而第二个表格样式包括折叠边框、居中、字号、单元格边框样式、单元格内边距、奇数行背景色和鼠标悬停背景色等样式。
通过这样的样式设计,我们可以让表格更加美观、易读,同时也提升了网页的交互性。大家可以根据实际需求,设计出适合自己的表格样式。
粉丝
0
关注
0
收藏
0