How to Add Image inside Table Cell in HTML ?

Last Updated : 22 Mar, 2024

Adding images inside HTML table cells can enhance the visual appeal of your tables, allowing you to effectively present images alongside text.

These are the following approaches:

Table of Content

Using <img> tag inside
Using CSS background-image property

Using <img> tag inside <td>

This approach involves using the <img> tag within a <td> element to directly embed an image in the table cell. The src attribute of the <img> tag specifies the URL or path of the image.

Example: This example shows the adding of image into the table cell using <img> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table with Image and Headers</title>
    <style>
        img {
            height: 40px;
            width: 50px;
        }

        h1 {
            color: green;
        }

        .container {
            text-align: center;
        }

        table {
            margin-left: 32%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <h3>Adding image inside table cell</h3>
        <table border="1">
            <tr>
                <th>Course Name</th>
                <th>Description</th>
                <th>Image</th>

            </tr>
            <tr>
                <td>DSA self placed course</td>
                <td>Learn with gfg</td>
                <td>
                  <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220519152227/DSA-course-by-Sandeep-Jain-banner.jpg"
                       alt="Image">
              </td>

            </tr>
            <tr>
                <td>AI for beginners</td>
                <td>Learn Ai</td>
                <td>
                  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230911173805/What-is-Artiificial-Intelligence(AI).webp"
                       alt="">
                  </td>

            </tr>
        </table>
    </div>
</body>

</html>

Output:

Output

Using CSS background-image property

This approach involves CSS to set a background image for an <td> element using background-image. Use different properties like background-size, background-position, and background-repeat to style the background image appearance.

Example: This example shows the adding of image into the table cell using background-image property.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table with Image and Headers</title>
    <style>
        img {
            height: 40px;
            width: 50px;
        }

        .container {
            text-align: center;
        }

        table {
            margin-left: 41vw;
        }

        .image-cell {
            background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>Adding image inside
            table cell using CSS
        </h3>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Founder</th>
                <th>Image</th>

            </tr>
            <tr>
                <td>GeeksForGeeks</td>
                <td>Sandeep Jain</td>
                <td class="image-cell"></td>

            </tr>
        </table>
    </div>
</body>

</html>