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


来源:网站优化外包 作者:坪山网站建设公司 日期:2019-01-23 浏览:

在网站建设开发中,表格几乎每个网站都会有所使用,而使用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可以减少错误、加快开发速度并提高文档的可移植性。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1743.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信