表格空间设置
![2f9c37a706e70a18842338c7ccac56e5.png](https://i-blog.csdnimg.cn/blog_migrate/5fe04fefda72fc4adfd40cbd73de8cd9.jpeg)
通过为
标签的 cellspacing进行赋值可以调整单元格与单元格之间的空间距离。示例代码如下:
页面效果如下:
![9ab4d438e8d2ae9b4d29eeb13ffd4d96.png](https://i-blog.csdnimg.cn/blog_migrate/e60064cdd8a5c6ec9a5157543c8d8368.jpeg)
下面我们删除cellspacing = "50"这段代码看看变化,如图:
![9c730fc8d65b629e6dd5c7ed8b0a19e2.png](https://i-blog.csdnimg.cn/blog_migrate/ef3c775f5edd92ba96230d67514b3872.jpeg)
通过对比,大家应该明白cellspacing这个属性的作用了吧。
通过为
标签的cellpadding进行赋值可以调整单元格边框与单元格内容之间的空间距离。
示例代码如下:
页面效果如下:
![702e824048ff47e50f09cf3fff029c45.png](https://i-blog.csdnimg.cn/blog_migrate/91dee578d3e0509f9e79fd801b2a02e0.jpeg)
通过与上图对比,我们不难发现变化。
设置表格颜色
这里我们要介绍一个全局属性style,对,你没看错!就是freestyle的那个style!英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上,可以为任何html元素设置颜色、大小、排列等不同属性!
值得一提的是把style信息如果写到一个独立文件中,并保存为css文件,就是以后我们要学的CSS层叠样式列表了。
这里我们先来简单了解一下它作为html的一个全局属性的用法。
示例代码如下:
页面效果如图所示:
![ac47c46ff8dc73ff3019c1b09325f8d7.png](https://i-blog.csdnimg.cn/blog_migrate/6172e14e2eb76370179c1467ef0f0bda.jpeg)
我们来分析一下这段代码,写法和其他属性大同小异。
首先也是才有"属性"="数值"的写法,具体是:style=""
是不是和其他属性写法一样?
但是到了双引号里面就不同了,比如width属性只需要为其赋值就可以,比如。
而style是在双引号里面再指定属性。例如:style="background-color"。
然后我们再为background-color(背景颜色)属性赋值。
这时,赋值的写法就发生变化了,不是使用=号,而是使用:。
例如style="background-color : #00ffff;"
大家注意的是为其赋值后,要用;结尾。这个;必须要添加,因为,通过style可以指定多个不同的样式属性,在指定多个样式属性时,我们使用;分割。
#00ffff这个符号是色彩的16进制表示方法,这个颜色是蓝色。
#000000这个符号的颜色是黑色。
#ffffff这个符号是白色。
这个颜色的算法我们会在下一期中详细讲解,感兴趣的小伙伴请关注!
大家想一想。如何为一列单元格指定背景颜色呢?
示例代码如下:我们为表格标题栏赋予绿色。
姓名年龄
页面效果如图所示:
![9c90dc3e6306045ce8f0471d7fa7d95b.png](https://i-blog.csdnimg.cn/blog_migrate/359cba80ee2453428efc6e2ffb04b8cd.jpeg)
下面我们为"一列一行"、"二列一行"赋予红色。
示例代码如下:
一列一行 一列二行二列一行 二列二行
页面效果如下:
![ce4a74be15e0c6b9bdc26a02992a49c7.png](https://i-blog.csdnimg.cn/blog_migrate/fa8708c6bb98f294bd40623cd26f69fc.jpeg)
今天的内容到此结束了,一下是今天示例的全部代码:
第一个网页
第一个网页
第一个网页
表格元素
表格元素
表格标题 姓名 年龄 一列一行 一列二行 二列一行 二列二行
明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。
喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
HTML完整学习目录
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中的
块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用标签实现文本内链接——零基础自学网页制作