Image Alignment Using Table

We can Align the Image using Table..This is a basic 2 & 3 column table with a Image & text. Be careful with large Images, if they don't fit on the box or in your about me, it will force the screen to scroll right & left.

Some don't like using table. they do not know this is the easiest way to make tricks on images. ("If you are preferred to have an headache lol").. i used table more often.. aside it load fast, you can divide the box to row and column.

If you want to put spaces between your Images, you can do that by padding your cells with cellpadding= or spacing your cells with cellspacing= inside your <table> tag.
set the width= of how wide the table you want.

Text on the left side. Picture in the middle.

And more text on this side

code:

<center><table width="85" cellpadding="5" cellspacing="5"> <tr><td valign=top><font color="BLACK" size="3" face="comic sans ms"> Text on the left side.<br><br>Image in the middle.</font></td> <td align=center><img src="Picture in the middle."></td> <td valign=bottom><font color="BLACK" size="3" face="comic sans ms"> And more text on this side</font></td></tr> </table></center>

You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.

YOUR TEXT GOES HERE YOUR TEXT GOES HERE YOUR TEXT GOES HERE

code:

<center><table width="400" cellpadding="10"> <tr><td valign=middle><font color="BLACK" size="2" face="comic sans ms"> YOUR TEXT GOES HERE< /td> <td align=center> <img src="Image URL"> </td></tr></table></center>

Next I added <br> five times before the last picture. That forces 5 spaces above the last picture. Now you need to align the data in each cell. In the <td> tag just before the first Image I added align=center valign=top That will center the Image and place it at the top of the cell. In the <td> tag before the second Image I added align=center valign=middle This will align the Image vertically & horizintally in the center of the cell. Next I added align=center valign=bottom to the <td> tag just before the last Image. That will align the Image in the center at the bottom of the last cell.

code:

<center><table width=400>
<tr><td align=center valign=top><img src="Image URL" width="90" height="120"></td>
<td align=center valign=middle><img src="Image URL" width="90" height="120"></td>
<td align=center valign=bottom>
<br><br><br><br><br><img src="Image URL" width="90" height="120">
</td></tr></table></center>

HHere's another example of how you can arrange your Images using a table. This time I am only using two columns. The column on the left has two pictures. I used <br> to force the pictures on top of each other, then added it two more times to add spaces between the two pictures. The cell on the right has one picture that is centered vertically & horizontally within the cell. If you are using one large picture and two small pictures, you can put the large one in the cell on the right.



code:

<center><table width=65%> <tr><td align=center valign=top><img src="Image URL" width="90" height="120"> <br><br><br> <img src="Image URL" width="90" height="120"></td> <td align=center valign=middle><img src="Image URL" width="90" height="120"></td> </tr></table></center>

You can add a border to your table by adding border=2 or any other size you prefer.