通过为<table></table>标签的cellspacing进行赋值可以调度单元格与单元格之间的空间间隔。

示例代码如下:

<table border = "1" width = "100%" cellspacing = "50">

页面效果如下:

html表格设置大小应用HTML添加表格3间距与色彩零基本自学网页制造 Node.js

下面我们删除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>标签实现文本内链接——零根本自学网页制作