Question

How to create a table with images

Posted on August 10, 2024
Website Development
Asked by 4bcc449cb679429f91ac3cae54b053

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!

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.

Bobby Iliev

Site Moderator

• 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

KFSys

Site Moderator

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