CSS 可以在表格样式设计中发挥很大的作用,大家可以使用诸如border
、background-color
、text-align
、vertical-align
等样式属性来设计表格。例如,以下代码是一个简单的表格样式:
table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; } thead { background-color: #f2f2f2; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { font-weight: bold; } tr:hover { background-color: #f5f5f5; }
其中,table
的属性设定了表格的基本样式,包括表格边框、宽度、上下左右居中等。而thead
表示表格头部,大家可以通过设定其背景颜色来区分表头和表格内容。而th
和td
分别表示表格头部和内容的样式,大家可以通过设定边框、内边距、文本对齐方式等来打造表格的外观。如果需要在悬浮时显示选中项,可以使用:hover
伪类设置背景色高亮。
通过调整上述属性,大家可以实现表格样式的多种变化,比如表格主体部分背景色变为灰色,表格头部字号加大等。改变表格样式可以让网页内容更加吸引人,同时也能增强网站的易用性和用户体验。