1、将html文件和图片放在同一文件夹，例如放在电脑桌面；
2、打开html编辑窗口，对表格进行编辑，完成表格的标签；
3、在单元格“table”里面插入图片的标签，然后在“单元格td”后面插入图片的保存路径即可。
HTML表格的基本结构包括<table>、<caption>、<tr>、<td>、<th>等标记
1：<table>标记有以下属性
① width属性：表示表格的宽度
② height属性：表示表格的高度
③ border属性：表示表格外边框的宽度
④ align属性表示表格的显示位置：left居左显示；center居中显示；right居右显示。
⑤ cellspacing属性：单元格之间的间距
⑥ cellpadding属性：单元格内容与边框的显示距离
⑦ frame属性：控制表格边框外层的四条线框
⑧ rules属性：控制显示单元格之间的分割线
2：<caption>标记用于表格中使用标题
<caption>标记的align属性有四个取值：
① top表示标题放在表格的上部
② bottom表示标题放在表格的下部
③ left表示标题放在表格的左部
④ right表示标题放在表格的右部
3：<tr>标记用来定义表格的行，对于每一个表格行，都是由一对<tr>…</tr>标记表示。<tr>标记有如下几种属性
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
4：<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记中，成对出现。<th>是表头标记，<th>中的文字会被默认加粗，而<td>不会，<td>是数据标记，表示该单元格的具体数据。两者的标记属性是一样的：
① bgcolor属性用来设置背景颜色
② align属性用来设置垂直方向对齐方式
③ valign属性用来设置水平方向对齐方式
④ width属性用来设置表格的宽度
⑤ height属性用来设置表格的高度
⑦ rowspan设置单元格所占行数
⑧ colspan设置单元格所占列数
使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。
1.制作表格大家需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。
2.预览网页大家发现，网页显示格式看起来不像是表格，因为没有框线，这时候大家需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页大家就可以看到表格样式。
3.图中的表格表头和文本内容显示格式一致，大家可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。
4.可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。
5.两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3.
6.将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，大家可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。
