在HTML中，给表格加颜色有多种方法，以下是一些常见的方法：
1、使用内联样式：在HTML表格标签中直接添加style属性，设置背景颜色、边框颜色等，这种方法简单快捷，但不够灵活。
<table style="background-color: #f2f2f2; border: 1px solid #ccc;">
<tr>
<td style="border: 1px solid #ccc;">单元格1</td>
<td style="border: 1px solid #ccc;">单元格2</td>
</tr>
<tr>
<td style="border: 1px solid #ccc;">单元格3</td>
<td style="border: 1px solid #ccc;">单元格4</td>
</tr>
</table>
2、使用CSS样式表：将样式代码写在一个单独的.css文件中，然后在HTML文件的head部分引用这个样式表，这种方法更加灵活，便于管理和维护。
创建一个名为style.css的文件，内容如下：
table {
background-color: #f2f2f2;
}
table tr {
border: 1px solid #ccc;
}
table td {
border: 1px solid #ccc;
}
在HTML文件的head部分引用这个样式表：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
3、使用CSS类：在HTML表格标签中添加class属性，然后在CSS样式表中定义这个类的样式，这种方法同样灵活，可以针对多个元素应用相同的样式。
在CSS样式表中定义一个名为.colored的类：
.colored {
background-color: #f2f2f2;
}
在HTML表格标签中添加class属性：
<table class="colored">
<tr>
<td class="colored">单元格1</td>
<td class="colored">单元格2</td>
</tr>
<tr>
<td class="colored">单元格3</td>
<td class="colored">单元格4</td>
</tr>
</table>
4、使用JavaScript和jQuery：通过JavaScript或jQuery库动态修改表格的颜色，这种方法可以实现更复杂的交互效果，但需要编写额外的代码。
使用jQuery实现表格颜色的切换：
引入jQuery库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
编写JavaScript代码：
$(document).ready(function() {
$("button").click(function() {
$("table").toggleClass("colored");
});
});
在HTML文件中添加一个按钮，用于触发颜色切换：
<button>切换颜色</button>
<table class="colored">
<tr>
<td class="colored">单元格1</td>
<td class="colored">单元格2</td>
</tr>
<tr>
<td class="colored">单元格3</td>
<td class="colored">单元格4</td>
</tr>
</table>