在 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