整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
通过为<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页面中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>标签实现文本内链接——零基础自学网页制作
温馨提示】亲爱的朋友，阅读之前请您点击【关注】，您的支持将是我最大的动力！#如何提高自己的职场竞争力#
从事人事部门工作的小伙伴们，对于员工信息、员工档案表非常熟悉了。
那么你创建的员工档案表中有员工照片吗？
员工照片你是一张张插入图片完成的吗？
今天阿钟老师教你Excel中批量导入图片，再多的员工照片导入也是分分钟的事。
下图表格是我们创建的员工信息表，照片需要插入到D列，并且要和姓名对应。
我们的员工照片放在了E盘【员工照片】文件夹中，文件名以员工姓名命名。
首先，我们在员工信息表D2单元格输入公式：="<table><img src=""E:\员工照片\"&C2&".jpg""width=""177""height=""248"">"
然后再向下填充公式，效果如下图。
公式中用的是HTML超文本语言，你只记住这几处即可：
1、E:\员工照片\ 为存放照片的文件夹，如果你的照片不是存放在这里，可以修改成你的文件夹；
2、.jpg 为照片的格式，一般图片的格式还有.JPEG、.BMP、.PNG等，你的照片是什么格式，在这里修改；
3、177、248 这两个数字是照片的宽度和高度，可以鼠标右键点击照片，查看照片的宽度和高度。
接下来，我们需要打开电脑上的记事本程序。
复制D列的公式内容，粘贴到记事本中，如下图：
调整员工信息表中D列的列宽和表格的行高，以便容下照片，如果不确定尺寸的话，尽量大一些。
复制【记事本】的内容，然后回到Excel，鼠标右键点击D2单元格，在弹出的菜单中选择【选择性粘贴】
在选择性粘贴窗口中，方式选择【Unicode文本】，最后点击【确定】
大功造成，照片全部按照姓名对应到表格中了。是不是很简单呢，赶快去操作试试吧！
小伙伴们，在使用Excel中还碰到过哪些问题，评论区留言一起讨论学习，坚持原创不易，您的点赞转发就是对小编最大的支持，更多教程点击下方专栏学习。
昨天我们在《使用HTML添加表格1（基本元素）——零基础自学网页制作》（文章结尾有目录）中学习了如何向网页中添加基础表格，今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。
老规矩，先介绍表头和表脚的标签。
表头：<thead></thead>
这个标签只是告诉页面这里是表头，如果添加文字的话还需要<tr></tr>列标签和<td></td>行标签。
如果要添加表头的话，直接在代码中添加这个标签是不行的，我们还需要将其他表格内容放置到<tbody></tbody>中，这样html才能知道哪里是表格内容，哪里是表头内容。
示例代码如下所示：
<table border = "1" width = "100%">
<thead><!--表头开始标签-->
<tr>
<td>表格的头部信息</td>
</tr>
</thead><!--表头结束标签--><tbody><!--表格内容开始标签-->
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody><!--表格内容结束标签-->
</table>代码效果如图：
大家通过观察发现，表格的标题标签<caption></caption>虽然写在<tbody></tbody>里面，但是显示的时候，却一直在表格的最上面。
合并单元格操作：我们希望表头信息能够在表格中独占一列，这样就需要介绍如何修改<td></td>行标签中的colspan属性。
示例代码如下：
<thead>
<!--表头开始标签--><tr><td colspan = "2">表格的头部信息</td></tr></thead><!--表头结束标签-->修改后效果如下：
colspan的意思就是"列合并"，col是column（列、纵队）的缩写，span是跨度的意思。
colspan就是为<td></td>列标签指定跨越几个列向单元格。
这里我们要合并两个，故colspan="2"，2一定要用半角引号引起来！
那合并行单元格的属性是什么呢？其实反推一下也能猜出。行的英文是row，因此rowspan就是"行合并"。
代码示例如下：我们把"一行一列"和"二行一列"纵向合并。
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>效果如图所示：
大家注意，如果您合并成了"一行一列"，那就要把"二列一行"删掉。
最后，我们来写一下表格的脚部信息。
脚部标签如下：<tfoot></tfoot>
使用方法和<thead></thead>一样，在中间添加列行标签来显示内容。
同时也要给<td></td>行标签进行列向合并单元格，即添加colspan="2"。
示例代码如下：
<tfoot><tr><td colspan = "2">表格的脚部信息</td></tr></tfoot>值得注意的是：这块代码的位置在<thead></thead>之后，<tbody></tbody>之前。
示例代码如下：
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "2">表格的脚部信息</td>
</tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>
</tbody>
</table>页面效果如下：
今天的内容结束了。明天我们继续讲解列表元素的其他属性。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
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>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
