DigitalOcean

Question

How to create a table with images

as

Submit an answer


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!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys
Site Moderator
Site Moderator badge
• August 12, 2024

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.

  • Image Sizing:

    • The img CSS rule in the <style> block sets the image width to 100px and the height to auto to maintain the aspect ratio. You can adjust these values as needed.

  • 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.

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.

Bobby Iliev
Site Moderator
Site Moderator badge
• August 11, 2024

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, where src is the URL of your image, alt is a text description for accessibility, and width sets 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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Learn more

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Learn more

Featured Tutorials

Kubernetes CourseLearn Python 3Machine Learning in PythonGetting started with GoIntro to Kubernetes

DigitalOcean Products

App PlatformVirtual MachinesManaged DatabasesManaged KubernetesBlock StorageObject StorageMarketplaceVPCLoad Balancers

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
Animation showing a Droplet being created in the DigitalOcean Cloud console
© 2024 DigitalOcean, LLC.Sitemap.