padding-left inside a table

css html-table html-email newsletter
user3074521 picture user3074521 · Dec 19, 2013 · Viewed 15.6k times · Source

I'm trying to build a newsletter which I've designed to be sent by email. I've now the problem that the text has no space to the images around it and I would like to change the background-color of the text field to grey just like:

enter image description here

If I'm giving it a new td is the whole code not working anymore could you help me please.

Here is the complete code jsfiddle

<table width="600*" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr><br>
        <td width="201" valign="top"  >
            <img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394"/><br />
            <br />
        </td>

        <td width="291" valign="top">
            <img src="images/angebotbild1.jpg" style="display: block;" border="0" width="335" height="150"/>
            <div style="margin-top: 3px;"></div>
            <font color="#778da7" face="Trebuchet, Arial, Verdana, Helvetica, sans-serif" size="2" style="font-size: 12px"> the text </font><br><br>
            <a  href="#" alt="Book now" target="_blank" style="color:#cc1f2f; font-weight:bold; text-decoration:none;float:left"><img src="images/button.jpg" width="335" height="60" style="display:block;" border="0" /></a>
        </td>
    </tr>
</table>

Answer

Pallavi picture Pallavi · Dec 19, 2013

You can wrap the font tag within div. Then add padding-left and set display: inline-block. Also background-color can be applied to the td, as rest of the part will be covered by images.

Thanks

Related questions

Making whole <td> Clickable through anchor tag

While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix. Below is a screen shot of an html table. I need to make the whole area clickable and not …

Read More
Color a table row with style="color:#fff" for displaying in an email

We would like to display order details as table in an email ​<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</…

Read More
Remove spacing between table cells and rows

I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of …

Read More