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;">
html-table html-email
edited Nov 18 '18 at 14:32
jonrsharpe
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
|
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;">
html-table html-email
edited Nov 18 '18 at 14:32
jonrsharpe
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
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 ofattribute="..."in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31
cellpaddingis 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;">
html-table html-email
edited Nov 18 '18 at 14:32
jonrsharpe
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
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
html-table html-email
edited Nov 18 '18 at 14:32
jonrsharpe
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
edited Nov 18 '18 at 14:32
jonrsharpe
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
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
76.9k11102208
asked Nov 18 '18 at 13:08
nixnix
6
asked Nov 18 '18 at 13:08
nixnix
6
asked Nov 18 '18 at 13:08
nixnix
6
6
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 ofattribute="..."in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31
cellpaddingis 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 ofattribute="..."in favor of using style, either in-line or using separate css file.
– Coderino Javarino
Nov 18 '18 at 14:31
cellpaddingis 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
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
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
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
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
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
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
gwallygwally
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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
gwallygwally
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
gwallygwally
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
gwallygwally
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
gwallygwally
1,5492616
answered Nov 18 '18 at 16:11
gwallygwally
1,5492616
answered Nov 18 '18 at 16:11
gwallygwally
1,5492616
answered Nov 18 '18 at 16:11
gwallygwally
1,5492616
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
2
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 |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
cellpaddingis 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