给表格设置背景色需掌握优先级与选择器：先为table设整体背景，再用tr:nth-child(odd/even)实现奇偶行变色，结合tbody避免表头干扰；通过class或内联样式高亮特定单元格；注意background-color的优先级顺序为table < tr < td < class/id < 内联样式，合理控制层级确保样式正确生效。
CSS表格背景色的添加，说白了就是给表格的各个部分（表格本身、行、单元格）设置
background-color属性。但具体怎么操作，才能让表格看起来更美观、更符合设计需求，这其中还是有些门道的。
给表格添加背景色，直接修改CSS样式即可。
如何给整个表格设置背景色？
给整个表格设置背景色是最简单的，直接选中
<table>标签，然后设置
background-color属性就行了。比如，你想让整个表格的背景色变成淡蓝色，可以这样写：
table {
background-color: #E0F2F7; /* 淡蓝色 */
}是不是很简单？但这样设置后，表格的所有部分，包括表头、表体、表尾，都会变成淡蓝色。如果想让表格的某些部分有不同的背景色，那就需要更精细的控制了。
立即学习“前端免费学习笔记（深入）”；
如何给表格的奇数行和偶数行设置不同的背景色？
这个技巧在数据量大的表格中非常实用，可以提高可读性，让用户更容易区分每一行的数据。实现这个效果，可以使用CSS的
:nth-child()选择器。例如，让奇数行是白色，偶数行是淡灰色：
tr:nth-child(odd) {
background-color: #FFFFFF; /* 白色 */
}
tr:nth-child(even) {
background-color: #F2F2F2; /* 淡灰色 */
}这样，你的表格就会呈现出斑马线的效果，看起来更清晰。不过，要注意的是，如果你的表格中有
<thead>、
<tbody>、
<tfoot>等标签，
:nth-child()选择器会分别对它们进行计数。所以，如果你的表头也算作一行，那么奇偶行的颜色可能会错乱。解决这个问题，可以针对
<tbody>中的行进行选择：
tbody tr:nth-child(odd) {
background-color: #FFFFFF; /* 白色 */
}
tbody tr:nth-child(even) {
background-color: #F2F2F2; /* 淡灰色 */
}如何给表格的特定单元格设置背景色？
有时候，我们需要突出表格中的某些单元格，比如总计行、重要数据等。给特定单元格设置背景色，可以直接选中这些单元格，然后设置
background-color属性。比如，你想让表格的最后一个单元格变成红色：
table tr:last-child td:last-child {
background-color: #FF0000; /* 红色 */
}当然，更常见的做法是给需要突出显示的单元格添加一个class，然后通过class来设置背景色：
<table>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>总计</td>
<td class="highlight">100</td>
</tr>
</table>.highlight {
background-color: #FFFF00; /* 黄色 */
}这样，带有
highlightclass的单元格就会变成黄色，更加醒目。
表格背景色设置的优先级问题
在CSS中，样式的优先级是很重要的。如果多个样式规则都应用到了同一个元素，那么优先级最高的样式会生效。在表格背景色设置中，优先级从低到高依次是：
<table>
的背景色<tr>
的背景色<td>
的背景色- 带有class或id的
<td>
的背景色 - 内联样式
也就是说，如果你同时给表格、行和单元格都设置了背景色，那么单元格的背景色会覆盖行的背景色，行的背景色会覆盖表格的背景色。如果单元格有class或id，那么class或id的样式会覆盖普通的单元格样式。如果使用了内联样式，那么内联样式的优先级最高，会覆盖所有的外部样式。
所以，在设置表格背景色时，要考虑到样式的优先级，避免出现样式冲突，导致最终效果不符合预期。
