前端 | 设置隔行变色的单元格

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单。在网页中也可以来创建出不同的表格。在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格。如果表格中的单元格比较多，那么可以设置隔行变色的效果，就能让表格显得清晰和一目了然。设置隔行变色的方法十分简单:可以给偶数(或奇数)行的tr标记都设置上背景色的效果就可以了。

解决方案

首先我们应该先写出一个简单的表格，再在这个表格的基础上添加颜色，合并单元格等。

在此基础上，我们可以为表格设置隔行渐变色，以此来突出重点。添加的代码如下：

此时大家可能又会想，要是在表格里添加图片，可能会是表格更加美观。接下来我们简单的插入一张图片。（为了使表格尽可能的美观，我们就变化一下表格样式。)

结语

兴趣是最好的老师。在学习过程我们难免会遇到自己不愿意学的东西。但是我们可以尝试着将自己喜欢的东西与枯燥的学习相结合。也许这样我们可能会有更多的学习热情。

where2go 团队

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！