Add Image Inside Table Cell in HTML

This article will introduce a method to add images inside the table cell in HTML.

Use the img Tag to Add Image Inside the td Element in HTML

We can use the img tag inside the td element, the table data, to add an image inside the table cell. A td tag defines each cell in the table.

Any data inside <td></td> are the content of table cell. We can specify the image source in the img tag.

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

This will display the image named image.jpg inside a table cell.

For example, create a table using the table tag. Give it a border of 3 in the border attribute so that the border in the table can be visible.

Next, create three table rows using the tr tag. The first tr is for the table headers th, and the others for the table data td.

In the first tr table row, give the headings Name, Address and Image using the th tag. Then in the second and third row, specify the name, address, and image inside td.

For instance, write Jack Austin and France as the table data for the second tr.

Then, inside the td, create the img tag as shown above and insert a picture. Similarly, fill the data for the second row.

Specify the height and width for the image inside the img tag with the height and width attributes.

The example below shows the implementation of the above instruction to add the image inside the table cell. There are three rows in the table.

The first row contains the heading of each column, and the remaining rows contain the data.

We have added an image in the third column of the table using the img tag. We learned that the img tag could be written wherever we inserted the image.

We assume that the image is in the same folder/directory as the HTML file. Correct image path must be specified in the src of the img tag; else, the image will not be displayed.

Example Code:

<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>