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.

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

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