How to add image inside table cell in HTML

In this article, you will look at how to add images inside the 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 we can see the table border.
    <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 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.

All code together
<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>
Try it Yourself »

Conclusion

In this article, you have learned how to add a image inside a table cell in HTML.