在 HTML 中的表格單元格內新增圖片
Rajeev Baniya
2023年2月19日
2022年4月22日
本文將介紹一種在 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>