使用HTML添加表格3（间距与颜色）-零基础自学网页制作

格空间设置

通过为<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>标签实现文本内链接——零基础自学网页制作

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1100+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，应用灰度效果，让页面变成黑白显示。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！


body {
  filter: grayscale(1); // 1相当于100%
}

分享原因

这段代码展示了如何使用 CSS 滤镜来将整个网页变为灰度效果。

在特殊的日子里，网页有整体变灰色的需求，可以使用这段代码，这个需求很有必要。

再就是做一些老照片或黑白电影的效果，也可以使用这段代码。

代码解析

1. 选择器 body

这一部分选择了 HTML 文档的 <body> 元素，即整个网页的主体。

CSS 的 filter 属性通常用于图像，但也可以应用到其他任何 HTML 元素上。

2. grayscale(1);

grayscale 滤镜将元素的颜色变成灰度效果。

参数 1 表示 100% 灰度，参数 0 表示无灰度效果。

3. filter 所有属性值大盘点！

CSS 的 filter 属性提供了多种图形效果，且这些属性值可以组合用起来，且可以应用于任何元素。

以下是 filter 属性的所有值及其详细解释：

blur()

功能：应用模糊效果。

参数：接受一个长度值（如 px、em），默认值是 0。

示例：filter: blur(5px);

brightness()

功能：调整图像的亮度。

参数：接受一个数值，1 为原始亮度。值小于 1 会降低亮度，值大于 1 会增加亮度。

示例：filter: brightness(0.5);

contrast()

功能：调整图像的对比度。

参数：接受一个数值，1 为原始对比度。值小于 1 会降低对比度，值大于 1 会增加对比度。

示例：filter: contrast(200%);

drop-shadow()

功能：应用阴影效果。

参数：类似于 box-shadow，包括偏移量、模糊半径和颜色。

示例：filter: drop-shadow(10px 10px 10px #000);

grayscale()

功能：将图像变为灰度。

参数：接受一个 0 到 1 之间的数值，0 为无灰度，1 为完全灰度。

示例：filter: grayscale(1);

hue-rotate()

功能：旋转图像的色相。

参数：接受一个角度值，单位为度（deg）。

示例：filter: hue-rotate(90deg);

invert()

功能：反转图像的颜色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全反转。

示例：filter: invert(1);

opacity()

功能：调整图像的透明度。

参数：接受一个 0 到 1 之间的数值，0 为完全透明，1 为完全不透明。

示例：filter: opacity(0.5);

saturate()

功能：调整图像的饱和度。

参数：接受一个数值，1 为原始饱和度。值小于 1 会降低饱和度，值大于 1 会增加饱和度。

示例：filter: saturate(2);

sepia()

功能：将图像变为棕褐色。

参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全棕褐色。

示例：filter: sepia(1);

url()

功能：引用 SVG 滤镜。

参数：接受一个 URL，指向一个包含 SVG 滤镜的文件。

示例：filter: url(#filter-id);

- end -

TML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML样式：好看的颜色字体是有方法的

在线咨询

上一篇：javascript自学记录：表单脚本2
下一篇：程序员都应该了解的一种数据格式之 JSON

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用HTML添加表格3（间距与颜色）-零基础自学网页制作

格空间设置

HTML完整学习目录

TML 样式实例 - 背景颜色

您的项目需求