在网页设计中,表格是一个必不可少的元素。然而,普通的表格往往没有美感,阅读起来也不够方便。这个时候,我们可以使用CSS来优化表格的样式使其更加好看。
以下是一个简单的table样式代码:
table {width: 100%;border-collapse: collapse;border: 1px solid #ddd;}th, td {padding: 10px;text-align: left;}th {background-color: #4286f4;color: #fff;}tr:nth-child(even) {background-color: #f2f2f2;}
上述代码实现了以下几个功能:
- 设置表格宽度为100%;
- 设置表格边框折叠为collapse;
- 设置表格边框为1像素,颜色为#ddd;
- 设置表头和表格单元格内边距为10像素;
- 设置表头背景颜色为#4286f4,字体颜色为#fff;
- 设置奇数行背景颜色为#f2f2f2。
这些简单的代码可以使表格看起来更加美观,易于阅读。当然,你还可以根据自己的需求添加更多的CSS属性来优化表格样式。