一、如何插入图像？

<img>元素可以向网页插入图片，<img src="XXX" />，XXX就是图片的路径，可以是本地路径或者网址，例如：<img src="http://www.htmq.com/images/logo.gif" />就是链接的网页地址。<img>标签没有结束标签，跟<br>标签一样加个斜线"/"，完整的形式应该是<img src="" />。<img>一定要有src属性的，不要丢。

我们来试着插入一张图片吧。dreamweaver中输入<img src="后就会弹窗引导打开需要嵌入的图片，非常方便，不用手动输入图片的地址了。

二、修改图像显示的大小

width属性和height属性可以规定图像的大小，其中width指定图像显示的宽度，height指定图像显示的高度。

我们将img标签添加上width属性和height属性：<img src="_olfwsqpsg4gdmeb9qah-a.jpg" width="600" height="200"/>

完成后的显示效果：

三、html中的表格

html中<table>定义表格，简单的 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

table标签也可以加上width属性和height属性，在网页中添加了一个table表格：

<table border="1" width="300" height="111">
<tr>
  <th>th1</th>
  <th>th2</th>
</tr>
<tr>
  <td>td1</td>
  <td>td2</td>
</tr>
</table>

添加表格后的效果图：

table中的border属性决定了表格边框线的厚度，0就是没有。

border值改成0之后就是这样的：

四、我们来制作个复杂点带图片的表格吧

结合前面的知识，做一个带有表格和文字的表格。

table如下，仅仅是在td里嵌入了<img>标签，非常简单：

<table border="0">
<tr>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg" width="100" height="100" />
  <p>菊花</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Penguins.jpg" width="100" height="100" />
  <p>企鹅</p>
  </td>

  <td><img src="../../Public/Pictures/Sample Pictures/Desert.jpg" width="100" height="100" />
  <p>沙漠</p>
  </td>

</.tr>

<tr>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg" width="100" height="100"/>
  <p>灯塔</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Jellyfish.jpg" width="100" height="100" />
  <p>水母</p>
  </td>

  <td>
  <img src="../../Public/Pictures/Sample Pictures/Koala.jpg" width="100" height="100" />
  <p>考拉</p>
  </td>

</tr>
</table>

同学们自己动手试试哦，熟能生巧。这篇教程介绍了<img>标签用法和<table>标签的用法，同学们复习一下然后继续学习吧！