as
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hey there!
If you’re looking to create a table that includes images, you can easily do this using HTML. Here’s a simple example to get you started:
<table border="1">
<tr>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td><img src="https://example.com/image1.jpg" alt="Image 1" width="100"></td>
<td>This is the first image.</td>
</tr>
<tr>
<td><img src="https://example.com/image2.jpg" alt="Image 2" width="100"></td>
<td>This is the second image.</td>
</tr>
</table>
In this example:
- I’m using a basic HTML
<table>with two columns: one for the image and one for the description. - The
<img>tag is used to display the images, wheresrcis the URL of your image,altis a text description for accessibility, andwidthsets the size.
You can customize the table by adjusting the column count, adding more rows, or styling it with CSS for a nicer look.
Hope this helps! If you have any more questions or need further clarification, feel free to ask. 😊
- Bobby
Heya,
You’ll need to utilize the <table> tag in HTML paired with <tr> and <td>.
Here is an example of an HTML table with images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Images</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
img {
width: 100px;
height: auto;
}
</style>
</head>
<body>
<h2>Image Table Example</h2>
<table>
<tr>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td><img src="image1.jpg" alt="Image 1"></td>
<td>Description of Image 1</td>
</tr>
<tr>
<td><img src="image2.jpg" alt="Image 2"></td>
<td>Description of Image 2</td>
</tr>
<tr>
<td><img src="image3.jpg" alt="Image 3"></td>
<td>Description of Image 3</td>
</tr>
</table>
</body>
</html>
-
HTML Structure:
- The table is created using the
<table>tag. - The
<tr>tags represent table rows. - Inside each row,
<th>is used for table headers, and<td>is used for table data. - The images are added within the
<td>elements using the<img>tag.
- The table is created using the
-
Image Sizing:
- The
imgCSS rule in the<style>block sets the image width to 100px and the height toautoto maintain the aspect ratio. You can adjust these values as needed.
- The
-
Table Borders and Spacing:
- The
border-collapse: collapse;CSS rule makes sure there’s no space between the table borders. border: 1px solid black;adds a black border around the table, cells, and header.
- The
Customization:
- Replace
"image1.jpg","image2.jpg", and"image3.jpg"with the actual paths to your images. - Update the “Description of Image X” with appropriate descriptions for your images.
You can add as many rows and images as needed by copying the <tr> section and adjusting the content accordingly.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.