How to use CSS background-image property In HTML

Using <img> tag inside <td>

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.w3wiki.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>w3wiki</td>
                <td>Sandeep Jain</td>
                <td class="image-cell"></td>

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

</html>

Output:

Output

How to Add Image inside Table Cell in HTML ?

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

Tags:

#HTML-Questions #HTML #Web Technologies

Using <img> tag inside <td>

How to use CSS background-image property In HTML

How to Add Image inside Table Cell in HTML ?

Similar Reads