Member Avatar for Arjun_Sarankulu

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
  • 4 Contributors
  • 3 Replies
  • 102 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by RoyalElite96
Member Avatar for macneato

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

Edited by macneato because: n/a
Member Avatar for contusvideo

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

Member Avatar for RoyalElite96

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.