How to Add Image in HTML Table ?

Last Updated : 07 Mar, 2024

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to add images to an HTML table i.e. using plain HTML and using HTML with inline CSS for styling.

Add Image in HTML Table

In this method, we'll add images to each row of the table using the <img> tag within plain HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Table with Images</title>
    <style>
        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo" width="100" 
                height="100">
            </td>
            <td>XYZ</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo" width="100" 
                height="100">
            </td>
            <td>ABC</td>
            <td>[email protected]</td>
        </tr>
    </table>
</body>

</html>

Output:

table-image

Explanation

We add a new column with the heading "Image" to accommodate the images.
Inside each row, under the "Image" column, we insert an <img> element.
The src attribute is used to specify the path of the image file.
The alt attribute provides alternative text for the image if it cannot be displayed.
The width and height attributes are used to set the size of the image.

Add Image in HTML Table using HTML and Inline CSS

In this method, we'll add images to the table and use inline CSS to style the images for better presentation.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Styled Table with Images</title>

    <style>
        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo" 
                style="width: 100px; height: 100px; border-radius: 50%;">
            </td>
            <td>XYZ</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo" 
                style="width: 100px; height: 100px; border-radius: 50%;">
            </td>
            <td>ABC</td>
            <td>[email protected]</td>
        </tr>
    </table>
</body>

</html>

Output:

table-image-2