Html 具有交替颜色行的CSS表格

您好，我想知道css表格是否可以有交替颜色行？我希望它看起来像这样

到目前为止，我的表代码如下。我已经试过了，但似乎还是没能成功。这可能吗？如果是，我将如何实施它？谢谢

<table style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="text-align: center;">
<p>Pricing</p>
<p>Structure</p>
</td>
<td style="text-align: center;">
<p>Professional</p>
<p>Resume</p>
<p>$199</p>
</td>
<td style="text-align: center;">
<p>Managerial</p>
<p>Resume</p>
<p>$299</p>
</td>
<td style="text-align: center;">
<p>Executive</p>
<p>Resume</p>
<p>$399</p>
</td>
<td style="text-align: center;">
<p>C-Suite</p>
<p>Resume</p>
<p>$499</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Resume Specs</td>
<td style="text-align: center;">2-3 pg resume</td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;">Phone Interview</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">
<p>Tick</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Draft To Approve</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Template Options</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Extras</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Delivery</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Cover Letter</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
</tr>
<tr>
<td style="text-align: center;">
<p>If your not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss </p>
<p>your arrangements</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>teaching &amp; nursing)</p>
<p>Early career professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>professionals (lawyers,</p>
<p>medical doctors), BDM's</p>
<p>consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Head of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members &amp; Non-Execs,</p>
<p>Practice Directors &amp; Principals</p>
</td>
</tr>
</tbody>
</table>

定价

结构

专业的

恢复

199美元

管理的

恢复

299美元

行政人员

恢复

399美元

套房

恢复

499美元

简历规格
2-3页简历
4-5页简历
+封面及

图形

+独立生物pg
电话采访
打上钩
打上钩
打上钩
滴答声

拟批准的草案
打上钩
打上钩
打上钩
打上钩
模板选项
打上钩
打上钩
额外费用
+免费LinkedIn

侧面图

+免费LinkedIn

侧面图

传送
.docx&；号。pdf

版本

.docx&；文件。pdf

版本

.docx&；文件。pdf

版本

.docx&；文件。pdf

版本

求职信
+ $50
+ $50
+ $50
+ $50
如果你不知道在哪里

你的工作会合适的

联系讨论

你的安排

职业（例如

（教学及护理）

早期职业专业人士

管理人员和高级管理人员

专业人士(律师,

医生），BDM's

顾问

高级管理人员和执行官

董事（营运）

经理、总经理、财务总监

系

首席执行官、首席财务官、首席运营官、首席信息官、

董事总经理

成员和非执行董事

执业董事及校长

您可以使用CSS3为选择器的奇数或偶数元素添加样式

td:nth-child(odd) {
    background: #ff0000;
}

td:nth-child(even) {
    background: #0000ff;
}

---

您可以使用CSS3，它允许将样式放置到选择器的奇数或偶数元素

td:nth-child(odd) {
    background: #ff0000;
}

td:nth-child(even) {
    background: #0000ff;
}

更多阅读：更多阅读：