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.
  • Floating Images - I may add this method and example in the future.

Table Method Using Social Media icons and example links:


Join Our Facebook Fan Page Check Us Out On MySpace Follow Us On Twitter

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://api.ning.com/files/MDqSwhCErxpAQCHv4V6BYNGSo6HZtPRtmdNol8nUrh*9kn1SnIvLjlpZd6Ko*QzkrV*cTHhej40aypylc9FNyuGQpVsVCJyS/facebooks3_128.png" 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://api.ning.com/files/DsEd0qFuUcwu-OqK9dBmlNVWoJnSrPzFfHychkrtcyfIjc3ClCHytCj7mN4-pm0ueyEsbXFWSsCmgbKKk87IKMBhWf9093Ba/myspaces3_128.png" 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://api.ning.com/files/DsEd0qFuUcyyy80lToFsf7IsEIyNbOEfUNaXKa1B3Jg6Oyf*PzQO3DZuQ3sltrfVqgifMzcq59A7ip8S0KYYtSYbsFhBFNrX/twitters3_128.png" 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.

Tags: Add Images Side by Side, Add Images in Horizontal Row, horizontal images, horizontally placed images, image placement, images in row, images in table, placing images horizontally, side-by-side images

Views: 10275

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>

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips