在 HTML 中的表格单元格内添加图片

Rajeev Baniya 2023年2月19日 2022年4月22日
在 HTML 中的表格单元格内添加图片

本文将介绍一种在 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 标签给出标题 NameAddressImage。然后在第二行和第三行中,指定 td 中的名称、地址和图片。

例如,将 Jack AustinFrance 写为第二个 tr 的表数据。

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

使用 heightwidth 属性在 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>

相关文章 - HTML Table