HTML5轻松更改表格背景颜色，技巧一网打尽

在 HTML5 中，更改表格背景颜色可以通过多种方式实现，以下是一些常用的技巧，帮助你轻松为表格添加个性化的背景颜色。

1. 使用内联样式

最简单的方法是直接在 <table> 标签中使用内联样式来设置背景颜色。这种方式适用于简单的页面和快速原型设计。

<table style="background-color: #f2f2f2;"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

2. 使用 CSS 类

创建一个 CSS 类，并将该类应用于 <table> 标签，可以让你在多个表格之间重用背景颜色样式。

.table-background { background-color: #f2f2f2; }

<table class="table-background"> <!-- 表格内容 --> </table>

3. 使用 CSS 选择器

使用 CSS 选择器可以针对特定的表格元素设置背景颜色，例如针对表格头部（<th>）或表格行（<tr>）。

th { background-color: #e0e0e0; } tr:nth-child(odd) { background-color: #f2f2f2; }

<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

4. 使用 JavaScript

如果你想要动态更改表格背景颜色，可以使用 JavaScript 来添加交互性。

<table id="myTable"> <!-- 表格内容 --> </table> <script> document.getElementById('myTable').style.backgroundColor = '#f2f2f2'; </script>

5. 伪元素

使用 CSS 伪元素可以针对表格的不同部分添加背景颜色，例如为表头添加下边框。

table { border-collapse: collapse; } th::after { content: ""; display: block; clear: both; } th { background-color: #e0e0e0; border-bottom: 1px solid #dcdcdc; }