How to add image inside table cell in HTML

In this article, you will look at how to add images inside a table cell in HTML.

Use the <img> tag to add an Image inside the <td> element in HTML.

Add image inside table cell

Name	Location	Photo
Apu Gorai	India

Try it Yourself »

1. Create a table using the <table> tag and give it a border of 4 px using the border attribute so that the table will visible to us.

   <table border="4">
   </table>

2. Then , inside the table element, create two rows using the <tr> tag. The first <tr> for the table header <th> and the second <tr> for the table data <td>.

   <table border="4">
     <tr></tr>
     <tr></tr>
   </table>

3. Inside the first row <tr> , create three <th> elements. The first one is for the name, second is for the location and the last one is for the image.

   <table border="4">
     <tr>
       <th>Name</th>
       <th>Location</th>
       <th>Image</th>
     </tr>
     <tr></tr>
   </table>

4. Next, inside the second row <tr>, create three <td> elements. Then specify the Name as Apu Gorai, Location as India and inside the last <td> element, create a <img> tag to add an image inside this cell.

   <table border="4">
       <tr>
           <th>Name</th>
           <th>Location</th>
           <th>Photo</th>
       </tr>
       <tr>
           <td>Apu Gorai</td>
           <td>India</td>
           <td><img src="https://app.3schools.in/logo.png" height="100" width="100"></td>
       </tr>
   </table>

   A <td> tag defines each cell in a table. Any data inside the <td> </td> are the content of a table cell.
5. Give a height using the height attribute and also a width using the width attribute to the image.

Click on the Try it Yourself » button to see the output of the code.

<table border="4">
    <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Photo</th>
    </tr>
    <tr>
        <td>Apu Gorai</td>
        <td>India</td>
        <td><img src="https://app.3schools.in/logo.png" height="100" width="100"></td>
    </tr>
</table>

In below example, you can find a responsive HTML table and inside the table cell, there is an image. Click on the Try it Yourself » button to look at the table.

Conclusion

In this article, you have learned how to add an image inside a table cell in HTML. We may use an online table generator to create a table dynamically.