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

2019-01-23 15:27:59

在网站建设开发中，表格几乎每个网站都会有所使用，而使用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可以减少错误、加快开发速度并提高文档的可移植性。

上一篇 | 网站设计制作需要的系列基础软件工具整理说明

下一篇 | 网站建设前端开发中使用Div和Section有什么不同