当前位置: 开发笔记 > 前端 > 正文

网站设计时更改HTML表格背景色的新方法探索

作者：DTor惜涵_237 | 来源：互联网 | 2023-10-11 15:34

在网站建设开发中，表格几乎每个网站都会有所使用，而使用css样式表更改表格或者单元格背景颜色更不陌生html设置背景色。这篇文章讲述的主题，通过一些技术探索，告

在网站建设开发中，表格几乎每个网站都会有所使用，而使用css样式表更改表格或者单元格背景颜色更不陌生html设置背景色。这篇文章讲述的主题，通过一些技术探索，告诉你在网站设计时更改HTML表格背景色的新方法。多年来，更改网站上表格各部分的背景色的方法已经发生了变化，随着样式表的引入其变得更加容易。较旧的方法使用属性bgcolor来更改表的背景色。它还可用于更改表行或表单元格的颜色。但是bgcolor属性已经被弃用，取而代之的是样式表，所以它不是操纵表格背景颜色的最佳方式。更改背景颜色的更好方法，是将Style属性背景颜色添加到表、行或单元格标记中。

以下示例更改整个表格的背景色：

要更改单行的颜色html设置背景色，请在

标记中插入背景颜色属性：

可以通过将属性添加到<；td>；标记来更改单个单元格的颜色：

还可以相同的方式将背景颜色应用于表头或<；th>；标记：

使用样式表更改背景颜色

但是，最好避免使用背景颜色属性，而使用格式正确的样式表html设置背景色。例如，可以在HTML文档头部的样式表中设置样式，也可以在外部样式表中设置样式。类似于Head或外部样式表中的更改可能会显示为表、行和单元格的以下内容：

table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }

设置列背景颜色

设置列背景颜色的最佳方法是创建一个Style类，然后将该类分配给该列中的单元格html设置背景色。创建类允许您使用一个属性将该类分配给特定列中的单元格。

CSS：

td.ColColor { background-color: blue; }

HTML:

cell 1	cell 2
cell 1	cell 2

通过样式表控制背景颜色的一个显著优点是您可以在以后更改颜色选择html设置背景色。不必遍历HTML文档并对每个单元格进行更改，您可以对CSS中的颜色选择进行单个更改，该更改将立即应用于class=“Col Color”语法出现的每个实例。虽然在HTML中插入CSS或调用单独的CSS文件会增加一些管理开销，而不仅仅是修改HTML属性，但您会发现依赖CSS可以减少错误、加快开发速度并提高文档的可移植性。

推荐阅读

文件
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
view
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
base64
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
hover
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
hover
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
hover
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
hover
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
hover
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
jquery
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
jquery
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
view
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
view
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
view
ABAP开发发送邮件程序的配置和代码整理

本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]

蜡笔小新 2023-12-13 15:50:17
view
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
overflow
CSS3 animation动画属性详解及用法

本文详细介绍了CSS3 animation动画的各种属性及用法，包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习，读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]

蜡笔小新 2023-12-11 08:47:46

DTor惜涵_237

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章