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

2021-12-22 分类：网站设计

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

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

<table style="background-color: #ff0000;">

要更改单行的颜色，请在<tr>标记中插入背景颜色属性：

<tr style="background-color: yellow;">

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

<td style="background-color: #000;">

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

<th style="background-color: #000;">

使用样式表更改背景颜色

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

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

设置列背景颜色

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

CSS：

td.ColColor { background-color: blue; }

HTML:

<table>
<tr><td class="ColColor">cell 1</td><td>cell 2</td></tr>
<tr><td class="ColColor">cell 1</td><td>cell 2</td></tr>
</table>

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

网站题目：网站设计时更改HTML表格背景色的新方法探索
文章起源：https://www.cdcxhl.com/news24/141474.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站设计等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容