专栏首页算法与编程之美前端 | 设置隔行变色的单元格

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

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

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

问题描述

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

解决方案

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

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

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

结语

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

where2go 团队

微信号:算法与编程之美

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

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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML|利用CSS美化一个html表格

    我们通常做一个表格的时候,会发现表格是左上对齐的,且表格看起来非常单调,整个页面也很简洁。我们以为表格都应该是这个样子的吗?其实不然,表格也可以在网页中体现得很...

    算法与编程之美
  • 网页|HTML表格制作

    在我们学习工作想要做出一个表格的时候,我们通常会直接打开Excel,但其实,使用html进行表格制作时,更能体会到敲代码的魅力。

    算法与编程之美
  • Java|Java生成Excel表

    最近遇到一个问题,就是在系统页面上加一个Excel表格导出的问题,这个问题很好解决啊,写一个JS把后台给的数据导出到Excel表格不就行了吗。然而当我们在测试的...

    算法与编程之美
  • 世界著名期刊杂志里的表格样式

    我自己制作过不少糟糕的表格,也见过更多不规范的表格样式,其不专业的形态有很多种,不一而足。整体上看,这些不规范的表格,主要表现为结构混乱、逻辑不清以及外观粗糙。

    Lenis
  • Hyperledger Fabric与其他块链实现有何不同?

    [表格]

    首席架构师智库
  • HTML|利用CSS美化一个html表格

    我们通常做一个表格的时候,会发现表格是左上对齐的,且表格看起来非常单调,整个页面也很简洁。我们以为表格都应该是这个样子的吗?其实不然,表格也可以在网页中体现得很...

    算法与编程之美
  • 用faster-rcnn和MaskRCNN做表格检测

    为什么需要提取文本图像中的表格区域?如果你做过OCR或者有一定了解,那么考虑这样一个场景:一张论文截图,有图有表还有公式,如果直接做OCR,首先纯文本区域应该是...

    机器学习AI算法工程
  • 速读原著-TCP/IP(糊涂窗口综合症)

    基于窗口的流量控制方案,如 T C P所使用的,会导致一种被称为“糊涂窗口综合症 S W S(Silly Window Syndrome)”的状况。如果发生这种...

    cwl_java
  • Python 助力词频统计自动化

    上周除了爬虫的问题,还尝试写了份词频统计的代码。最初听到关于词频的需求描述,有点懵。在了解其具体操作流程后发现:类似的需求可能涉及各行各业,但本质只是 Word...

    TTTEED
  • 跨公网调用的大坑与架构优化方案

    第三方接口挂掉,我们的服务会受影响么? 一、缘起与大坑 很多时候,业务需要跨公网调用一个第三方服务提供的接口,为了避免每个调用方都依赖于第三方服务,往往会抽象一...

    架构师之路

扫码关注云+社区

领取腾讯云代金券