当前位置:首页 > 实用技巧 >

html如何设置表格单元格的背景色(html设置表格单元格宽度)

来源:原点资讯(www.yd166.com)时间:2023-06-24 12:20:04作者:YD166手机阅读>>

通过与上图对比,我们不难发现变化。

设置表格颜色

这里我们要介绍一个全局属性style,对,你没看错!就是freestyle的那个style!英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上,可以为任何html元素设置颜色、大小、排列等不同属性!

值得一提的是把style信息如果写到一个独立文件中,并保存为css文件,就是以后我们要学的CSS层叠样式列表了。

这里我们先来简单了解一下它作为HTML的一个全局属性的用法。

示例代码如下:

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

页面效果如图所示:

html如何设置表格单元格的背景色,html设置表格单元格宽度(5)

我们来分析一下这段代码,写法和其他属性大同小异。

首先也是才有"属性"="数值"的写法,具体是:style=""

是不是和其他属性写法一样?

但是到了双引号里面就不同了,比如width属性只需要为其赋值就可以,比如width="100%"。

而style是在双引号里面再指定属性。例如:style="background-color"。

然后我们再为background-color(背景颜色)属性赋值。

这时,赋值的写法就发生变化了,不是使用=号,而是使用:。

例如style="background-color : #00ffff;"

大家注意的是为其赋值后,要用;结尾。这个;必须要添加,因为,通过style可以指定多个不同的样式属性,在指定多个样式属性时,我们使用;分割。

#00ffff这个符号是色彩的16进制表示方法,这个颜色是蓝色。

#000000这个符号的颜色是黑色。

#ffffff这个符号是白色。

这个颜色的算法我们会在下一期中详细讲解,感兴趣的小伙伴请关注!

大家想一想。如何为一列单元格指定背景颜色呢?

示例代码如下:我们为表格标题栏赋予绿色。

<tr style = "background-color: #00ff00;"><th>姓名</th><th>年龄</th></tr>

页面效果如图所示:

html如何设置表格单元格的背景色,html设置表格单元格宽度(6)

下面我们为"一列一行"、"二列一行"赋予红色。

示例代码如下:

<tr> <td style = "background-color: #ff0000;">一列一行</td> <td>一列二行</td> </tr> <tr> <td style = "background-color: #ff0000;">二列一行</td> <td>二列二行</td> </tr>

页面效果如下:

html如何设置表格单元格的背景色,html设置表格单元格宽度(7)

今天的内容到此结束了,一下是今天示例的全部代码:

<!DOCTYPE HTML> <html> <head> <title>第一个网页</title> </head> <body> <h1>第一个网页</h1><hr> <h2>表格元素</h2><hr> <table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;"> <caption>表格标题</caption> <tr style = "background-color: #00ff00;"> <th>姓名</th> <th>年龄</th> </tr> <tr> <td style = "background-color: #ff0000;">一列一行</td> <td>一列二行</td> </tr> <tr> <td style = "background-color: #ff0000;">二列一行</td> <td>二列二行</td> </tr> </table> </body> </html>

明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录
上一页12末页

栏目热文

html表格背景颜色(html表格背景色怎么设置)

html表格背景颜色(html表格背景色怎么设置)

1.表格的制作1、表格元素–<table>表格中的行–<tr>表格中的列–<td>表...

2023-06-24 11:57:26查看全文 >>

html中怎么修改整个表格背景颜色(html表格的背景颜色怎么调)

html中怎么修改整个表格背景颜色(html表格的背景颜色怎么调)

1.表格的宽度 高度 边框 <width> <height> <border>2.表...

2023-06-24 12:13:54查看全文 >>

html单独给某个单元格设置背景色(html如何将这个表格背景颜色改变)

html单独给某个单元格设置背景色(html如何将这个表格背景颜色改变)

在HTML中,我们经常会用到table布局;有时候需要实现指定单元格,当鼠标移动到上面的时候,该单元格背景变色,不是该行...

2023-06-24 11:46:28查看全文 >>

html表格背景颜色怎么设置(html表格背景色怎么设置)

html表格背景颜色怎么设置(html表格背景色怎么设置)

在网站建设开发中,表格几乎每个网站都会有所使用,而使用css样式表更改表格或者单元格背景颜色更不陌生。这篇文章讲述的主题...

2023-06-24 12:20:22查看全文 >>

王者荣耀单机模式什么阵容厉害(王者荣耀单机模式玩哪个英雄)

王者荣耀单机模式什么阵容厉害(王者荣耀单机模式玩哪个英雄)

很多单排玩家都喜欢吐槽王者荣耀的ELO机制,毕竟连胜之后就连败、层出不穷的坑爹猪队友都让单排玩家顶不住!是时候转换心情了...

2023-06-24 12:00:46查看全文 >>

html表格背景颜色标签(html制作表格背景颜色)

html表格背景颜色标签(html制作表格背景颜色)

行颜色设置的简便方法昨天我们在《使用html添加表格3(间距与颜色)——零基础自学网页制作》(目录在结尾)中学习了设置单...

2023-06-24 12:02:17查看全文 >>

html设置表格字体颜色(html怎么改变表格字体颜色)

html设置表格字体颜色(html怎么改变表格字体颜色)

越来越多的企业开始使用可视化图表,而不是传统报表展现企业经营数据因为,与文字、传统表格相比,图表更有表现力,呈现的内容更...

2023-06-24 11:51:40查看全文 >>

html表格中文字颜色怎么设置(html表格代码怎么编写)

html表格中文字颜色怎么设置(html表格代码怎么编写)

HTML 样式实例 - 背景颜色background-color 属性为元素定义了背景颜色:<html> &...

2023-06-24 11:56:27查看全文 >>

html怎么让表格在背景颜色中显示(怎么把表格背景颜色)

html怎么让表格在背景颜色中显示(怎么把表格背景颜色)

属性为 HTML 元素提供附加信息。HTML 属性HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息...

2023-06-24 12:02:59查看全文 >>

王者荣耀账号注销是注销qq号吗(王者荣耀游戏账号注销qq号还有吗)

王者荣耀账号注销是注销qq号吗(王者荣耀游戏账号注销qq号还有吗)

《王者荣耀》注销功能在正式服上线了,你打算注销几个号?昨天(1月9日)《王者荣耀》正式迎来版本更新,此次更新后,除了上...

2023-06-24 11:44:43查看全文 >>

文档排行