Styling for responsive HTML email - attribute=“x” vs. style=“attribute:x;”

When styling tables for emails (or for any project), what is the significance of:

<table cellpadding="10px">

over:

<table style="padding:10px;">

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

To insert code in a question use the code insert button indicated by {}
– Brian Tompsett - 汤莱恩
Nov 18 '18 at 14:24

In general they deprecated a lot of attribute="..." in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31

cellpadding is deprecated, see developer.mozilla.org/en-US/docs/Web/HTML/Element/…
– jonrsharpe
Nov 18 '18 at 14:33

Thank you for answers - little daunting - hope I'm thanking everyone and in the right place - feel very lost inside this Code Store (like I'm looking up all around me at racks of code 100 feet tall and I'm the little dot in the middle of it all :))
– nix
Nov 18 '18 at 16:27

1

This is taken from a tutorial 'How to code responsive Emails" from Litmus which is what I was following. <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%"> <tr> <td align="center" valign="top"> </td> </tr> </table>
– nix
Nov 18 '18 at 16:33

|
show 1 more comment

When styling tables for emails (or for any project), what is the significance of:

<table cellpadding="10px">

over:

<table style="padding:10px;">

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

To insert code in a question use the code insert button indicated by {}
– Brian Tompsett - 汤莱恩
Nov 18 '18 at 14:24

In general they deprecated a lot of attribute="..." in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31

cellpadding is deprecated, see developer.mozilla.org/en-US/docs/Web/HTML/Element/…
– jonrsharpe
Nov 18 '18 at 14:33

Thank you for answers - little daunting - hope I'm thanking everyone and in the right place - feel very lost inside this Code Store (like I'm looking up all around me at racks of code 100 feet tall and I'm the little dot in the middle of it all :))
– nix
Nov 18 '18 at 16:27

1

This is taken from a tutorial 'How to code responsive Emails" from Litmus which is what I was following. <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%"> <tr> <td align="center" valign="top"> </td> </tr> </table>
– nix
Nov 18 '18 at 16:33

|
show 1 more comment

When styling tables for emails (or for any project), what is the significance of:

<table cellpadding="10px">

over:

<table style="padding:10px;">

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

When styling tables for emails (or for any project), what is the significance of:

<table cellpadding="10px">

over:

<table style="padding:10px;">

html-table html-email

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

edited Nov 18 '18 at 14:32

jonrsharpe

76.9k11102208

asked Nov 18 '18 at 13:08

nix

asked Nov 18 '18 at 13:08

nix

asked Nov 18 '18 at 13:08

nix

To insert code in a question use the code insert button indicated by {}
– Brian Tompsett - 汤莱恩
Nov 18 '18 at 14:24

In general they deprecated a lot of attribute="..." in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31

cellpadding is deprecated, see developer.mozilla.org/en-US/docs/Web/HTML/Element/…
– jonrsharpe
Nov 18 '18 at 14:33

Thank you for answers - little daunting - hope I'm thanking everyone and in the right place - feel very lost inside this Code Store (like I'm looking up all around me at racks of code 100 feet tall and I'm the little dot in the middle of it all :))
– nix
Nov 18 '18 at 16:27

1

This is taken from a tutorial 'How to code responsive Emails" from Litmus which is what I was following. <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%"> <tr> <td align="center" valign="top"> </td> </tr> </table>
– nix
Nov 18 '18 at 16:33

|
show 1 more comment

To insert code in a question use the code insert button indicated by {}
– Brian Tompsett - 汤莱恩
Nov 18 '18 at 14:24

In general they deprecated a lot of attribute="..." in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31

cellpadding is deprecated, see developer.mozilla.org/en-US/docs/Web/HTML/Element/…
– jonrsharpe
Nov 18 '18 at 14:33

Thank you for answers - little daunting - hope I'm thanking everyone and in the right place - feel very lost inside this Code Store (like I'm looking up all around me at racks of code 100 feet tall and I'm the little dot in the middle of it all :))
– nix
Nov 18 '18 at 16:27

1

This is taken from a tutorial 'How to code responsive Emails" from Litmus which is what I was following. <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%"> <tr> <td align="center" valign="top"> </td> </tr> </table>
– nix
Nov 18 '18 at 16:33

To insert code in a question use the code insert button indicated by {}
– Brian Tompsett - 汤莱恩
Nov 18 '18 at 14:24

In general they deprecated a lot of attribute="..." in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31

cellpadding is deprecated, see developer.mozilla.org/en-US/docs/Web/HTML/Element/…
– jonrsharpe
Nov 18 '18 at 14:33

Thank you for answers - little daunting - hope I'm thanking everyone and in the right place - feel very lost inside this Code Store (like I'm looking up all around me at racks of code 100 feet tall and I'm the little dot in the middle of it all :))
– nix
Nov 18 '18 at 16:27

This is taken from a tutorial 'How to code responsive Emails" from Litmus which is what I was following. <table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%"> <tr> <td align="center" valign="top"> </td> </tr> </table>
– nix
Nov 18 '18 at 16:33

|
show 1 more comment

1 Answer
1

active

oldest

votes

In email you would use <table cellpadding="10">.

In the case of what you posted, some email clients will ignore attribute="10px" completely, which is why you would use attribute="10" instead.

The problem with inline styles is Outlook tends to ignore them. It's selective on what it ignores.

This style might be deprecated in HTML 5, but email clients like Outlook 2007-2019 do not follow best practices.

Email development is not web development. It's a different style and set of rules you need to follow for optimal results.

Good luck.

answered Nov 18 '18 at 16:11

gwally

1,5492616

2

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361199%2fstyling-for-responsive-html-email-attribute-x-vs-style-attributex%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

In email you would use <table cellpadding="10">.

In the case of what you posted, some email clients will ignore attribute="10px" completely, which is why you would use attribute="10" instead.

The problem with inline styles is Outlook tends to ignore them. It's selective on what it ignores.

This style might be deprecated in HTML 5, but email clients like Outlook 2007-2019 do not follow best practices.

Email development is not web development. It's a different style and set of rules you need to follow for optimal results.

Good luck.

answered Nov 18 '18 at 16:11

gwally

1,5492616

2

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

add a comment |

In email you would use <table cellpadding="10">.

In the case of what you posted, some email clients will ignore attribute="10px" completely, which is why you would use attribute="10" instead.

The problem with inline styles is Outlook tends to ignore them. It's selective on what it ignores.

This style might be deprecated in HTML 5, but email clients like Outlook 2007-2019 do not follow best practices.

Email development is not web development. It's a different style and set of rules you need to follow for optimal results.

Good luck.

answered Nov 18 '18 at 16:11

gwally

1,5492616

2

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

add a comment |

In email you would use <table cellpadding="10">.

In the case of what you posted, some email clients will ignore attribute="10px" completely, which is why you would use attribute="10" instead.

The problem with inline styles is Outlook tends to ignore them. It's selective on what it ignores.

This style might be deprecated in HTML 5, but email clients like Outlook 2007-2019 do not follow best practices.

Email development is not web development. It's a different style and set of rules you need to follow for optimal results.

Good luck.

answered Nov 18 '18 at 16:11

gwally

1,5492616

In email you would use <table cellpadding="10">.

In the case of what you posted, some email clients will ignore attribute="10px" completely, which is why you would use attribute="10" instead.

The problem with inline styles is Outlook tends to ignore them. It's selective on what it ignores.

This style might be deprecated in HTML 5, but email clients like Outlook 2007-2019 do not follow best practices.

Email development is not web development. It's a different style and set of rules you need to follow for optimal results.

Good luck.

answered Nov 18 '18 at 16:11

gwally

1,5492616

answered Nov 18 '18 at 16:11

gwally

1,5492616

answered Nov 18 '18 at 16:11

gwally

1,5492616

answered Nov 18 '18 at 16:11

gwally

1,5492616

2

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

add a comment |

2

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

Thank you for your answer - tis daunting up in here, so I hope I'm putting this thanks in the right place
– nix
Nov 18 '18 at 16:25

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky