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
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.
<!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>w3wiki</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.w3wiki.net/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.w3wiki.net/wp-content/uploads/20230911173805/What-is-Artiificial-Intelligence(AI).webp"
alt="">
</td>
</tr>
</table>
</div>
</body>
</html>
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.
<!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.net/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: