Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu April 29, 2023 . #Element . #HowTo

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.

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 »

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.

save
listen
AI Answer
6 Answers
  1. Using the width and height attractive to the img element and set those value to 100%, you can fill the table cell with the image. Here is my code. <style>
    .table td{
      border:1px solid black;
    }
    </style>
    <div class="container">
     <table class="table" style="width:100%;height: 100%">
      <tr>
        <td style="width: 35%">
          <img src="https://app.3schools.in/img/bg.png" style="height: 100%;width: 100%"/>
        </td>
        <td>Everyone</td>
      </tr>
     </table>
    </div>

    • This does not work for me as it leaves an empty small gap at the bottom of the cell, between the image and the border of the cell
    • To fit the image in the table cell, you can use <div> element instead of <table> . Read more
    • How To Insert Image In Html From Folder?

      Sometimes the image is not visible in html page when you want to display from a folder 📂. How to solve image not showing in html
    Reply Delete
    Share
    Reply Delete
    Share
  2. Place image inside two rows using the rowspan attribute in html. <table border="2">
    <tr>
    <th>Name</th>
    <th>Location</th>
    <th rowspan="2">
    <img src="https://app.3schools.in/logo.png" height="50" width="50">
    </th>
    </tr>
    <tr>
    <td>John</td>
    <td>USA</td>
    </tr>
    </table>

    Reply Delete
    Share
  3. Create a stylish & rounded table and then add an image inside a cell.

    Live Demo
    Reply Delete
    Share
Write Your Answer
loading
back
View All