提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言一、表格背景二、隔行变色三、触摸表格行变色总结前言
我来给大家讲解一下
提示：以下是本篇文章正文内容，下面案例可供参考
一、表格背景
代码如下（示例）：
首先：先写一个表格
<div>
<table>
<thead>
<th>序号</th>
<th>商品名称</th>
<th>单价/元</th>
<th>数量</th>
<th>商品名称</th>
<th>单价/元</th>
<th>数量</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>电脑显示屏</td>
<td>1000</td>
<td>36</td>
<td>电脑主机</td>
<td>2000</td>
<td>36</td>
</tr>
<tr>
<td>2</td>
<td>投影仪</td>
<td>500</td>
<td>3</td>
<td>音箱</td>
<td>300</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>电脑桌</td>
<td>500</td>
<td>40</td>
<td>椅子</td>
<td>100</td>
<td>40</td>
</tr>
<tr>
<td>4</td>
<td>电灯</td>
<td>20</td>
<td>50</td>
<td>空调</td>
<td>2000</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>笔记本</td>
<td>20</td>
<td>40</td>
<td>练习册</td>
<td>10</td>
<td>40</td>
</tr>
</table>
</div>
css代码如下
table {border: 1px solid gainsboro;border-collapse: collapse;/*合并但与个*/text-align: center;width: 800px;}tr td {border: 1px solid gainsboro;height: 50px;}thead th {height: 30px;background-color: black;color: white;}
2.隔行变色
代码如下（示例）：
css样式如下
tbody tr:nth-child(2n) {background-color: aqua;}tbody tr:nth-child(2n-1) {background-color: green;}
2n 偶数行 2n-奇数行
3.触摸表格行变色
代码如下（示例）：
css样式如下
tbody tr:hover {background-color: antiquewhite;}
总结
表格css基本样式
