如何用css设置表格背景色-css教程-PHP中文网

如何用css设置表格背景色

P粉602998670

发布： 2025-10-31 19:27:13

原创

538人浏览过

使用background-color属性可为表格、表头、行或单元格设置背景色；2. 通过table选择器设整体背景，th设置表头颜色，:nth-child区分奇偶行实现斑马纹，class高亮特定行，组合使用提升可读性与美观。

如何用css设置表格背景色

要给表格设置背景色，可以直接使用CSS的 background-color 属性。你可以为整个表格、表头、行、单元格分别设置不同的背景颜色，以增强可读性和美观性。

通过选择 table 元素来设置整个表格的背景颜色：

示例代码：

立即学习“前端免费学习笔记（深入）”；

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

table {
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

登录后复制

通常表头需要更醒目的颜色，可以单独设置 th 单元格的背景：

示例代码：

立即学习“前端免费学习笔记（深入）”；

th {
  background-color: #4CAF50; /* 绿色背景 */
  color: white;              /* 白字提高可读性 */
}

登录后复制

使用 :nth-child 伪类可以让表格更易阅读：

示例代码：

立即学习“前端免费学习笔记（深入）”；

tr:nth-child(odd) {
  background-color: #f2f2f2; /* 浅灰 */
}
<p>tr:nth-child(even) {
background-color: #ffffff; /<em> 白色 </em>/
}</p>

登录后复制

可以通过添加 class 或使用更具体的选择器实现：

HTML 示例：

<tr class="highlight">
  <td>高亮行内容</td>
</tr>

登录后复制

CSS 样式：

.highlight {
  background-color: #fffacd; /* 柠檬黄 */
}

登录后复制

基本上就这些。灵活组合这些方法，就能做出清晰美观的表格样式。

以上就是如何用css设置表格背景色的详细内容，更多请关注php中文网其它相关文章！

大家都在看：