在 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 標籤給出標題 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>