How To: HTML Code for Placing Images Next to Each Other
Though I tried to do this manually without the help of a table, I failed. This is the easiest HTML code I found to place images next to each other in my sidebar. My example is 1 row by 3 columns.
|
<table width=”330″ border=”1″> <tr> <th scope=”col”><a href=”http://WEBSITE.COM/”><img src=”<?php bloginfo(‘template_directory’); ?>/images/NAME OF YOUR PIC.jpg” width=”110″ height=”110″ alt=”ALT TEXT GOES HERE” /></th> <th scope=”col”><a href=” http://WEBSITE.COM/”><img src=”<?php bloginfo(‘template_directory’); ?>/images/NAME OF YOUR PIC.jpg” width=”110″ height=”110″ alt=”ALT TEXT GOES HERE ” /></th> <th scope=”col”><a href=” http://WEBSITE.COM/”><img src=”<?php bloginfo(‘template_directory’); ?>/images/NAME OF YOUR PIC.jpg” width=”110″ height=”110″ alt=”ALT TEXT GOES HERE ” /></th> </tr> </table>
|
This also has code for hyperlinking your image to a website, but if you don’t want your images linked anywhere remove the code <a href=”http://WEBSITE.COM/”>. Make sure to note your image source. I have my pics loaded in a folder I named “images” within my theme’s folder.
You can change the width, border size, and picture sizes with their corresponding numbers in the HTML code. They’re labeled pretty clearly here so just make your adjustments. This example is set to:
- width = 330
- border = 1
- image size =110 x 110
Please note that I changed my images sizes to 110 x 110 before I uploaded them to my images folder.
This is probably the fastest way to place images, especially if you’re creating affiliate links in your sidebar. As always, if you have a faster or better way or if I’ve missed something, please let me know. Happy blogging!
[ad#in-post-links-only]
[...] The Joda Code. | Gossip in the City Naveen Sen and Praneeta Sahu in Do Hanson Ka Joda thekua.com@work » Controlling TimeBuilding a Grails project with Gradle @ Peter LedbrookCode Monkeyism: Ruby: Complexity cannot be reducedSPDE, Semi-functional programming for Processing | HieroglyphicsTired of Date and Calendar? | Jayway Team Blog – Sharing ExperienceIGDA Malaysia Chapter » IGDA Leadership Forum 2009REVERT TO CONSOLE › Accessing Drools 5 rules via a restful API using Drools Server and Groovy RestClientHow To: HTML Code for Placing Images Next to Each Other | Truth Parlor [...]