您的位置:主页 > 新闻中心 > 企业新闻 >

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

企业新闻 / 2021-10-07 13:15

本文摘要:表格空间设置通过为table/table标签的cellspacing举行赋值可以调整单元格与单元格之间的空间距离。示例代码如下:table border = 1 width = 100% cellspacing = 50页面效果如下:下面我们删除cellspacing = 50这段代码看看变化,如图:通过对比,大家应该明确cellspacing这个属性的作用了吧。 通过为table/table标签的cellpadding举行赋值可以调整单元格边框与单元格内容之间的空间距离。

押注lol比赛

表格空间设置通过为<table></table>标签的cellspacing举行赋值可以调整单元格与单元格之间的空间距离。示例代码如下:<table border = "1" width = "100%" cellspacing = "50">页面效果如下:下面我们删除cellspacing = "50"这段代码看看变化,如图:通过对比,大家应该明确cellspacing这个属性的作用了吧。

通过为<table></table>标签的cellpadding举行赋值可以调整单元格边框与单元格内容之间的空间距离。示例代码如下:<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">页面效果如下:通过与上图对比,我们不难发现变化。设置表格颜色这里我们要先容一个全局属性style,对,你没看错!就是freestyle的谁人style!英文翻译过来是"样式"、"气势派头"的意思。

我们通过这个属性可以为表格设置颜色。实际上,可以为任何html元素设置颜色、巨细、排列等差别属性!值得一提的是把style信息如果写到一个独立文件中,并生存为css文件,就是以后我们要学的CSS层叠样式列表了。

这里我们先来简朴相识一下它作为html的一个全局属性的用法。示例代码如下:<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">页面效果如图所示:我们来分析一下这段代码,写法和其他属性大同小异。

首先也是才有"属性"="数值"的写法,详细是: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>页面效果如图所示:下面我们为"一列一行"、"二列一行"赋予红色。示例代码如下:<tr> <td style = "background-color: #ff0000;">一列一行</td> <td>一列二行</td></tr><tr> <td style = "background-color: #ff0000;">二列一行</td> <td>二列二行</td></tr>页面效果如下:今天的内容到此竣事了,一下是今天示例的全部代码:<!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完整学习目录HTML序章(学习目的、工具、基本观点)——零基础自学网页制作HTML是什么?——零基础自学网页制作第一个HTML页面如何写?——零基础自学网页制作HTML页面中head标签有啥用?——零基础自学网页制作初识meta标签与SEO——零基础自学网页制作HTML中的元素使用方法1——零基础自学网页制作HTML中的元素使用方法2——零基础自学网页制作HTML元素中的属性1——零基础自学网页制作HTML元素中的属性2(路径详解)——零基础自学网页制作使用HTML添加表格1(基本元素)——零基础自学网页制作使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作使用HTML添加表格3(间距与颜色)——零基础自学网页制作使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作16进制颜色表现与RGB色彩模型——零基础自学网页制作HTML中的块级元素与内联元素——零基础自学网页制作初识HTML中的<div>块元素——零基础自学网页制作在HTML页面中嵌入其他页面的方法——零基础自学网页制作关闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作HTML表单元素初识1——零基础自学网页制作HTML表单元素初识2——零基础自学网页制作HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作HTML表单4(form的action、method属性)——零基础自学网页制作HTML列表制作解说——零基础自学网页制作为HTML页面添加视频、音频的方法——零基础自学网页制作音视频花样转换神器与html视频元素加字幕——零基础自学网页制作HTML中使用<a>标签实现文本内链接——零基础自学网页制作。


本文关键词:使用,HTML,添加,表格,间距,与,颜色,—,零,基础,lol比赛App下载

本文来源:押注lol比赛-www.cxmmx.com