JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

HTML 101 - Add Images in Horizontal Row - Add Images Side by Side, in HTML Code

How to add images side-by-side in a Ning text box, page, or any HTML web page.

There are 2 methods:

Adding Images to a Table
- The table method is not considered the "accepted" method with web designers.
- But, it's easy, and it works well. As of this writing, there is absolutely no plan by the W3C (World Wide Web Consortium) to deprecate the use of tables.
Adding Floating Images in DIV - See NO TABLE version at bottom of this tip.

Table Method Using Social Media icons and example links:

CODE FOR EXAMPLE ABOVE:

<div align="center"><table cellpadding="0" width="400" cellspacing="0"><tr><td><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301625658?profile=original" alt="Join Our Facebook Fan Page" width="128" height="128" border="0"></a></td><td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301627289?profile=original" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a></td><td><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301628949?profile=original" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></td></tr></table></div>

Notes:

I have added my side-by-side or horizontally placed images, within a table.
The table contains one row, and multiple columns or cells.
The example contains images and links for Social Media sites like Twitter and Facebook. Each of these 3 images are within a "link" or HREF tag. If you do not want links, remove the entire tag for "a href=" and be sure to remove the ending </a>.
The main key is to add a table, one row (TR), and multiple column cells (TD). Always end your tags with the appropriate </tag>.
If you do not want to center the images within your text box or page, remove the align="center" from the DIV tag.
Within the TABLE TAG, adjust your table width to suit your needs.
Please use your image paths, and be sure to either remove or change the HREF tag links.

SIMPLE CODE, NO TABLE:

Let's do this without using a TABLE. We don't have to use a table, because images will automatically float left one after the other when contained within a DIV. A DIV is a little more difficult to edit or harder on the eyes, but all-in-all it's cleaner code.

Now, let's simplify the code, and you can add your links and images. I will add 2 rows and 3 links/images per row:

<div align="center"><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a></div><div align="center"><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a></div>

Note - Non-Ning Sites: If you're not on a Ning site and your images are not floating left automatically, simply add this CSS as an inline style. I don't want to suggest adding as a global style because all of your site images would float left. I will add float:left to each image src. So, use this code instead:

<div align="center"><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a></div><div align="center"><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a></div>

Hope this tip helps solve the mystery of images being displayed side-by-side in HTML. It's very simple, but not until you know the proper way to write the HTML.

Best,

Jen

4 members favorited this

Replies to This Discussion

Permalink Reply by Magic Happens on April 21, 2010 at 3:35pm

Thanks, we are going to need you all over the web, lol

Permalink Reply by JenSocial on April 21, 2010 at 4:04pm

I'll be here, and hope you are too. I'm working hard to switch over to "all social networking platforms" as our new focus.
;-)

Permalink Reply by Magic Happens on April 21, 2010 at 4:17pm

That would be great. WOW

Permalink Reply by Temple of Our Lady of the Moon on April 21, 2010 at 9:13pm

Indeed!

Permalink Reply by Temple of Our Lady of the Moon on May 18, 2010 at 4:09pm

Like I understood that! OMG thats so greek to me....

Permalink Reply by Phuze'mthonjeni on August 20, 2012 at 4:15pm

Hi Jen, It has been a while. I am trying to use tables on the page http://phuzemthonjeni.com/learnerships-internships but the content does not line up. Please help

Permalink Reply by JenSocial on August 20, 2012 at 5:31pm

Phuze,

I tried to edit your code, but too much of it. There are so many divs, it's difficult to see where a table cell <td> starts and ends </td>. Ideally, you need to set the valign of the table row <tr> to top. But that didn't seem to help due to so many styles within the DIVs.

http://www.htmlcodetutorial.com/tables/_TR_VALIGN.html

Best,

Jen

Permalink Reply by Phuze'mthonjeni on August 21, 2012 at 6:26am

Hi Jen

Thank you valign. I have simplified the code and only have one table but still not aligning. Please check once more if you can't see anything strange.

http://phuzemthonjeni.com/learnerships-internships

Regards

Permalink Reply by JenSocial on August 21, 2012 at 12:08pm

Hi Phuze,

I looked, and way too much code to go through. Bottom line, if you want these rows to line up, the best way is with a table and cells. Use valign to force all cell content to go to top.

<table>
<tbody>
<!-- Row #1 -->
<tr>
<td>Row 1-Column 1</td>
<td>Row 1-Column 2</td>
<td>Row 1-Column 3</td>
</tr>
<!-- Row #2 -->
<tr>
<td>Row 2-Column 1</td>
<td>Row 2-Column 2</td>
<td>Row 2-Column3</td>
</tr>
<!-- Row #3 -->
<tr>
<td>Row 3-Column 1</td>
<td>Row 3-Column 2</td>
<td>Row 3-Column3</td>
</tr>
</tbody>
</table>