Wednesday, October 19, 2011

How to put pictures one next to another

In my new list of "HTML for Dum Me" topic, this post about pictures seems to fit!

I find that blogger is absolutely horrible when it comes to pictures space and localisation! Probably this is in part due to the fact that I am new to html but still, it could be a bit more user friendly!!

Anyway I finally am starting to figure out how to put two pictures side by side:

  • edit your post as html
  • insert the pictures where you need them
  • get the url of the pictures as written on the code lines that just appeared. It should be something along the lines: http://3.bp.blogspot.com/-lZEOAHeJaYk/Tp64xOKlgHI/AAAAAAAABcU/Rrb8D0WIMUs/s1600/SDC11052.JPG
  • create a table and add the pictures to the table
  • you can also specify parameters such as height, width and margin of the pictures

<table></table> will create a table
<td></td> contains one element of the table
width="200" sets the width of the picture
height="200" sets the height of the picture
style="margin-left: 0em" sets the right empty space of the picture. 0 em means no space at all.

Note that you can separate options by a " ; ".

Here is an example code:

The lines:

<table>
<tr>
<td><img src="http://3.bp.blogspot.com/-lZEOAHeJaYk/Tp64xOKlgHI/AAAAAAAABcU/Rrb8D0WIMUs/s1600/SDC11052.JPG" style="margin-left: 0em; margin-right: 3em" width="300" height="220"/></td>
<td><img src="http://3.bp.blogspot.com/-JUhUzHNDtNM/Tp7DJVfAjZI/AAAAAAAABdI/MIHrlZaq-fo/s320/SDC11046.JPG" width="300" margin-right: 0em;/></td>
</tr>
</table>

Will give you :

No comments:

Post a Comment