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=
alt="GFG Logo" width="100" height="100">
</td>
<td>XYZ</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td><img src=
alt="GFG Logo" width="100" height="100">
</td>
<td>ABC</td>
<td>abc@geeksforgeeks.org</td>
</tr>
</table>
</body>
</html>
|
Output:
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=
alt="GFG Logo" style="width: 100px; height: 100px; border-radius: 50%;">
</td>
<td>XYZ</td>
<td>xyz@geeksforgeeks.org</td>
</tr>
<tr>
<td><img src=
alt="GFG Logo" style="width: 100px; height: 100px; border-radius: 50%;">
</td>
<td>ABC</td>
<td>abc@geeksforgeeks.org</td>
</tr>
</table>
</body>
</html>
|
Output:
Explanation
- We use the same basic structure as in approach 1 (Add Image in HTML Table).
- In addition to the width and height attributes, we use the style attribute to apply inline CSS styles to the images.
- The border-radius: 50%; style is used to make the images circular, which is a common design choice for profile pictures.
- You can add more CSS styles as needed to customize the appearance of the images.