I have created a HTML Page
With Three images
Follwing is my code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!--
.style9 {
	font-family: Arial;
	font-size: 12px;
}
.style10 {
	font-size: 11px;
	color: #FFFFFF;
}
.style12 {
	font-family: Arial;
	font-size: 11px;
	color: #FFFFFF;
}
.style13 {color: #FFFFFF}
-->
</style>
</head>
 
<body>
 
<table width="500" align="center" cellpadding="0" cellspacing="1" bgcolor="#BA131A">	<!-- Table tag open 1-->
  <tr> 
    <th height="313" valign="top" scope="col">
	<table width="500" align="center" cellpadding="0" cellspacing="0">  <!-- Table tag open 1.1--> 
 
        <tr> 
          <th valign="top" scope="col"><img src="http://www.xxx.com/BirthdayGreetings.jpg" width="500" height="58" longdesc="Imags/Birthday greeting emailer Finel 11.jpg" /></th>
        </tr>
        <tr> 
          <td><img src="http://www.xxx.com/Birthday.jpg" width="500" height="258" longdesc="Imags/Birthday .jpg" /></td>
        </tr>
      </table></th>  <!-- Table tag closed 1.1-->
  </tr>
  <tr> 
    <td height="39" align="left" valign="top">
<table width="384" align="center" cellspacing="0" cellpadding="0"><!-- Table tag open 1.2-->
        <tr> 
          <th width="380" align="left" valign="bottom"" class="style12" style="font-family:Arial; font-size:11px; color:#FFFFFF><p align="left"left"><div align="left">Dear 
              Client,<br />
              <br />
              XYZ wishes you a very Happy Birthday. We hope 
              you have a wonderful and prosperous year ahead. </div>
            <p align="left"></p>
            <p align="left" class="style13">&nbsp;</p>
            <p align="left">Regards</p></th>
        </tr>
      </table></td><!-- Table tag closed 1.2 -->
  </tr>
  <tr>
    <td height="40"><table width="500" cellspacing="0" cellpadding="0" ><!-- Table tag open 1.3-->
        <tr> 
          <th scope="col"><img src="http://www.xxx.com/BirthdayEE.jpg" width="501" height="35" longdesc="Imags/Birthday EE.jpg" /></th>
        </tr>
      </table></td><!-- Table tag closed 1.3 -->
  </tr>
  <tr> 
    <td height="90" cellspacing="0" cellpadding="0">
	<table width="390" cellspacing="0" cellpadding="0" align="center" ><!-- Table tag open 1.4-->
        <tr> 
          <th width="386" height="80" align="left" valign="top" style="font-family:Arial; font-size:11px; color:#FFFFFF><div align="left"><div align="left"><span class="style12"><strong>ABC 
              ABC</strong><br />
              ABC<br />
              XYZ and <br />
              PQR Ltd.</span><br /></div>
              </div></th>
        </tr>
      </table></td><!-- Table tag closed 1.4 -->
  </tr>
</table>	<!-- Table tag closed 1 -->
</body>
</html>

When i am sending this html page on rediff, gmail and Yahoo
On yahoo its opening with proper alignment
But not on rediff and gmail
I am not getting what is wrong

To center an email in email clients
Create a 100% table, 1 row, 3 colums. In the center column of the first table, create another table with 1 column and 1 row and set the width to the physical width of the mailer. Set the width of the center <td> of the first table to the same width as the second table

Remember to add "style="display:block" to all images and add inline styling to each specific element

You can get HTML code from Google itself............. Accordingly, to your needs!

Don't use tables for layout. They are outdated. You could try something like this:

<div style="display: table-cell; width: 250px;">
<img src="your-image-1.png" />
</div>
<div style="display: table-cell; width: 250px;">
<img src="your-image-2.png" />
</div>
<div style="display: table-cell; width: 250px;">
<img src="your-image-3.png" />
</div>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.