HTML表格如何添加背景颜色_HTML表格背景色设置教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML表格如何添加背景颜色_HTML表格背景色设置教程

2025-10-22

浏览次数：次

返回列表

可通过内联样式或CSS为HTML表格设置背景色；2. 在table标签中使用style属性可设置整个表格背景；3. 在tr标签中设置style可改变行背景色；4. 在td或th标签中设置style可高亮单个单元格；5. 推荐使用CSS类统一管理样式，便于维护；6. 颜色值支持英文名称、十六进制和RGB格式。

html表格如何添加背景颜色_html表格背景色设置教程

给HTML表格添加背景颜色，可以通过内联样式或CSS来实现。直接在标签中使用style属性是最简单的方法，适合初学者快速上手。

1. 设置整个表格的背景色

在<table>标签中加入<code>style="background-color: 颜色值;"即可为整个表格设置背景颜色。示例代码：

第一行

第二行

这段代码会让整个表格的背景变为浅灰色。

2. 为表格行（tr）设置背景色

如果只想给某一行添加背景颜色，可以在<tr>标签中添加<code>style属性。

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

这一行是蓝色背景

这样只有该行的单元格会显示指定的背景色。

3. 为单个单元格（td/th）设置背景色

需要突出某个单元格时，可以直接在<td>或<code><th>上设置样式。 <p><strong><td style="background-color: yellow;">高亮显示</td></strong></p> <p>这个单元格的背景将变成黄色，适用于标记重点数据。</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1774"> <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6ce7d34668698.png" alt="Blackink AI纹身生成"> </a> <div class="aritcle_card_info"> <a href="/ai/1774">Blackink AI纹身生成</a> <p>创建类似纹身的设计，生成独特纹身</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Blackink AI纹身生成"> <span>80</span> </div> </div> <a href="/ai/1774" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Blackink AI纹身生成"> </a> </div> <h3>4. 使用CSS类统一管理样式（推荐）</h3> <p>如果表格较多或样式复杂，建议用CSS类来控制背景颜色，便于维护。</p> <p>在<code>中定义样式：