在网页制作中,表格(table)是一种常用的HTML元素。通过CSS样式可以让表格更加美观、易读。
给表格添加CSS样式的方法如下:
/*表格整体样式*/ table { width: 100%; /*表格宽度占满整个容器*/ border-collapse: collapse; /*合并边框,使表格看起来更整洁*/ } /*表头样式*/ th { font-size: 16px; /*字体大小*/ font-weight: bold; /*加粗*/ text-align: center; /*文本居中*/ padding: 10px; /*单元格内边距*/ background-color: #rgba(0, 0, 0, 0.5); /*背景色*/ color: #fff; /*字体颜色*/ } /*表格数据样式*/ td { font-size: 14px; /*字体大小*/ text-align: center; /*文本居中*/ padding: 10px; /*单元格内边距*/ border: 1px solid #ccc; /*单元格边框*/ } /*表格奇偶行变色*/ tr:nth-child(odd) td { background-color: #EEE; /*奇数行背景色*/ } tr:nth-child(even) td { background-color: #FFF; /*偶数行背景色*/ }
通过以上样式设置,我们可以将表格整体样式变得更加美观,表头加粗居中,表格数据添加边框,以及表格奇偶行变色等等,让表格更具有可读性和醒目度。