ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Web|设置隔行变色的单元格

2021-06-30 17:02:13  阅读:161  来源: 互联网

标签:Web 表格 单元格 tr 隔行 设置 变色


问题描述

     

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

解决方案

     

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

640?wx_fmt=png

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

640?wx_fmt=png

结语

     

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

 where2go 团队


   

640?wx_fmt=jpeg

 

标签:Web,表格,单元格,tr,隔行,设置,变色
来源: https://blog.51cto.com/u_15281984/2959994

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有