styling tr or td in emails?

问题

I want to change whole row cells background-color and font-size. (with inline-styles, because I can't use stylesheets or <style> tag)

Which element should I add these styles? I should add them on each <td> in one row or once for <tr> tag? which way is better?

<tr>
    <td style="background-color:red;font-size:12px">blah blah</td>
    <td style="background-color:red;font-size:12px">blah blah</td>
</tr>

<tr style="background-color:red;font-size:12px">
    <td>blah blah</td>
    <td>blah blah</td>
</tr>

回答1:

Setting the properties on td is safer in the sense that if you set them on tr, then any style sheet setting (possibly outside your control) for the properties on td will override your settings.

But if you expect to control the situation and to know that no other style sheet settings can interfere, you can set the properties on tr, which is shorter when using style attributes. That way, the cells will inherit font properties and they will have transparent background (the default), so the tr background shines through.

However, not all properties are inherited. For example, border properties aren’t, so to draw borders on cells, you need to set them on td elements (unless you are happy with the very limited possibilities that HTML attributes on table element have to offer).

回答2:

I usualy apply them to the cells, just to make sure. You could consider working with some sort of server side language though, this will prevent you from having to type it over and over again, and is much less of a pain when you want to change something. Something like this:

<?php
  $tdStyle = 'style="background-color:red;font-size:12px"';
?>

<tr>
 <td <?php echo $tdStyle;?> >blah blah </td>
 <td <?php echo $tdStyle;?> >blah blah </td>
</tr>

Or work with smarty, wich is even better suited for this. It's what i use... It would look like this:

{$tdStyle = 'style="background-color:red;font-size:12px"'}
<tr>
 <td {$tdStyle}>blah blah </td>
 <td {$tdStyle}>blah blah </td>
</tr>

回答3:

Your first option is the answer:

<tr>
    <td style="background-color:red;font-size:12px">blah blah</td>
    <td style="background-color:red;font-size:12px">blah blah</td>
</tr>

Second option never works in outlook.

回答4:

When I design HTML emails I add it to both the tr and td's. just to be safe. Also as a fall back from some email clients it's good to also add bgcolor="" in addition to the css.

回答5:

If you add style to TR tag then it will be applicable to whole row of that table, And if you add it on TD then it will be applicable to that TD only

I think To avoid same style write again and again you can write on whole tr

回答6:

You want to apply it to row, then why even ask if you should apply it to TD?

If you want a style on row apply it to TR.If you want style on Cell apply it to TD. ln-line styles are EVIL!! try avoiding them.

回答7:

Adding style to either td or tr should be fine. Inline styles and tables are the right way to go for html emails, else you will face with css compatibility problems with different browsers, mobile/email clients.

来源：https://stackoverflow.com/questions/12025857/styling-tr-or-td-in-emails

标签

html

css

styles

html-email