How to Make Pictures Side by Side in HTML

Save

Using HTML, you can place pictures side by side in a Web page in at least three different ways: by using tables, with cascading style sheets, or by placing image tags next to each other with no other HTML tags between them. Knowing how to apply at least one of these approaches lets you present your Web page's graphical content in an organized way. Note that placing images side by side doesn't guarantee all images will be visible at once. Crop your pictures to dimensions that work with the rest of your page's content.

Plain IMG Tag

  • Open a new file in a word processor or text editor such as Notepad.

  • Type or paste the following blank HTML document into your word processor. This document doesn't have any image tags yet. You'll add those next.

    <html>

    <body>

    </body>

    </html>

  • Type the following HTML tags after the "<body>" tag. These tags tell your browser to load images onto the Web page. Since there is no paragraph, line break or other HTML tag in between the two image tags, the image tags will appear side by side on the Web page. This will not be true if you resize your browser to less than the full width of your monitor, or if your images are very wide.

    <img src="imageLeft.jpg">

    <img src="imageRight.jpg">

  • Save your document under any filename with an extension of ".htm" or ".html," and as type "plain text." This ensures your browser can interpret the HTML tags in the file.

  • Open Windows Explorer, then navigate to any folder containing two or more JPEG files.

  • Copy two JPEG files to the folder containing your HTML document, which you saved in Step 4.

  • Rename one of the JPEG files as "imageLeft.jpg," and the other as "imageRight.jpg.

  • Click the file you saved in step 4, then press "Enter" to open the file in your default Web browser. The browser will display the two images side by side.

Tables

  • Paste the following blank HTML document into a word processor or text editor.

    <html>

    <body>

    </body>

    </html>

  • Paste the following HTML codes for defining a table after the "<body>" tag. The table's two cells are next to each other. When you insert pictures into these cells, the pictures will also be next to each other.

    <table border="1">

    <tr>

    <td>

    </td>

    <!-- Column two -->

    <td>

    </td>

    </tr>

    </table>

  • Type the following after the first "<td>," which begins the first cell of the table. This HTML code loads an image into the table's cell.

    <img src="imageleft.jpg">

  • Repeat the previous step, but place the second "<img>" tag after the second "<td>" tag, and change the "imageleft.jpg" string to "imageright.jpg"

  • Save the document as type "text," and type any filename ending with ".htm" or ".html."

  • Open Windows Explorer, then navigate to a folder containing at least two JPEG files. You may find such files by clicking the "Pictures" link the top left pane of Windows Explorer.

  • Copy two JPEG files into the folder containing the text file you saved in Step 5.

  • Rename one of the JPEG files as "imageLeft.jpg," and the other as "imageRight.jpg."

  • Double-click or press "Enter" on the file to open it in your browser. You'll see a table whose cells contain one image to the right of another image.

References

Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!