CODEWITHSUNDEEP
htmlcsslayouthtml-email
MarkAlexx
MarkAlexx

Reputation: 3

HTML table alignment not working correctly

I am currently creating a HTML email template. I have a table with 3 columns for the following:

[[logo] [text content ] [date]]

So the logo should be left aligned, and the date right aligned. However in outlook it doesn't look like the float is being accepted. this is how it currently looks.

Here is my current code:

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;">
        {{this.notificationMessage}}
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">{{this.date}}
      </td>
    </tr>
  </tbody>
</table>

I have been stuck with this issue for sometime, any help is much appreiacted

Upvotes: 0

Views: 3858

Answers (4)

Reyhaneh Torab
Reyhaneh Torab

Reputation: 367

you can use Float: right and i think you should omit anything about flex ( i mean: display:flex; flex-wrap: wrap;).

<html>
<body>
<table cellspacing="0" cellpadding="0" border="0" style=" margin-bottom:10px; width:100%;">
   <tbody>
      <tr>
         <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="img.."> 
         </td>
         <td width="63%;">
           aa
         </td>
         <td width="30%" style="text-align:right;float:right; margin-left:6px;">bb
         </td>
      </tr>
   </tbody>
</table>
</body>
</html>

Upvotes: 1

Umar Abdullah
Umar Abdullah

Reputation: 1290

You have to style="text-align:left; " for td.

Use below corrected code.

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%" style="text-align:left;" > <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;" style="text-align:left;" >
        Notification message
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">date
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

HTML should be coded as if it's the year 1999.

Tables should be used for layout and the use of modern HTML and CSS is best avoided where possible.

In your case above you should just use the align attribute on the table cell e.g.

<td align=left"></td>

<td align=right"></td>

If that doesn't work then try using CSS e.g.

<td style="text-align: left;"></td>

Here's a good guide to creating HTML email template from Mailchimp:

https://templates.mailchimp.com/getting-started/html-email-basics/

Upvotes: 3

Mayuri More
Mayuri More

Reputation: 216

You can give "text-align: left" for of also instead of "float: left" on

Upvotes: 0

Related Questions