迹忆客 专注技术分享

本文将介绍一种在 HTML 中的表格单元格内添加图片的方法。

在 HTML 中使用 img 标签的 td 元素内添加图片

我们可以使用 td 元素内的 img 标签，表格数据，在表格​​单元格内添加图片。td 标签定义表格中的每个单元格。

<td></td> 内的任何数据都是表格单元格的内容。我们可以在 img 标签中指定图片源。

<td>
 <img src="image.jpg">
</td>

这将在表格单元格中显示名为 image.jpg 的图片。

例如，使用 table 标签创建一个表格。在 border 属性中给它一个 3 的边框，以便表格中的边框可见。

接下来，使用 tr 标签创建三个表格行。第一个 tr 用于表头 th，其他用于表数据 td。

在第一个 tr 表行中，使用 th 标签给出标题 Name、Address 和 Image。然后在第二行和第三行中，指定 td 中的名称、地址和图片。

例如，将 Jack Austin 和 France 写为第二个 tr 的表数据。

然后，在 td 内，创建如上所示的 img 标签并插入图片。同样，填写第二行的数据。

使用 height 和 width 属性在 img 标记内指定图片的高度和宽度。

下面的示例显示了在表格单元格内添加图片的上述指令的实现。表中有三行。

第一行包含每列的标题，其余行包含数据。

我们使用 img 标签在表格的第三列添加了一张图片。我们了解到 img 标签可以写在我们插入图片的任何地方。

我们假设图片与 HTML 文件位于同一文件夹/目录中。必须在 img 标签的 src 中指定正确的图片路径；否则，图片将不会显示。

示例代码：

<table border="3" align="center">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Jack Austin</td>
    <td>France</td>
    <td><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>United States</td>
    <td height=100 width=100><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
</table>