1

I am currently making some e-mail templates, and I want to use as less CSS as possible. Therefore, I am not using 'padding' or 'margin', but the cellpadding="" and cellspacing="" attributes instead.

I was wondering, in CSS, you can use the X and Y when applying padding to an element like this:

padding: 0 10px 3px 0;

Is there also a way to do that with the cellpadding="" or cellspacing="" attributes?

Maarten Wolfsen
  • 1,625
  • 3
  • 19
  • 35
  • 1
    You should not use this attributes. It is not supported in `HTML5`. This W3C page will explain you how to use `CSS`instead: https://www.w3schools.com/css/css_table.asp – ADreNaLiNe-DJ Sep 04 '17 at 09:12
  • @ADreNaLiNe-DJ I know, but not every e-mail client supports padding (or margin), but they all seem to support cellspacing and cellpadding. In my webpages I never use these attributes, but they seem to be handy in e-mail templates. – Maarten Wolfsen Sep 04 '17 at 09:17
  • Did you try with the `style` attribute ? something like this answer https://stackoverflow.com/a/8682768/5119765 – ADreNaLiNe-DJ Sep 04 '17 at 09:20
  • 1
    Yes, these attributes are outdated, and since Maarten Wolfsen even mentioned, that he want's to use _as less CSS as possible_, the `style` Attribute is not really helpful. Und regular circumstances i would say, don't use `cellpadding` and `cellspacing`, but since you need it for an HTML Email, which feels like coding in 1995, it's undestandable. And now, to give an answer: As far as I know, there is no such thing as X and Y with these attributes, you can only define a number for all directions, sorry. – Matthias Seifert Sep 04 '17 at 09:23
  • 1
    @MatthiasS. Thanks for the answer! It was really helpful! (You might want to use this as an answer to my question) – Maarten Wolfsen Sep 04 '17 at 09:27
  • @ADreNaLiNe-DJ w3schools is NOT an w3c page! And it is actually not a reliable source. – Matthias Seifert Sep 04 '17 at 12:15

1 Answers1

1

So, if you come across this question in the future, and you are looking for a solution for your Website, than I highly recommend you to use CSS instead of the deprecated HTML Attributes cellpadding and cellspacing! You could either define it inline, so it may feels a bit like cellpadding, but preferably you should write this declarations in an external CSS File and define something like

td {
    padding: 5px; /* cellpadding */
    margin: 5px; /* cellspacing */
}

You can even set the padding and margin of every single side of the element like this:

td {
  padding: 5px 10px 15px 20px; /* top, right, bottom, left */
  margin:  5px 10px 15px 20px; /* equal to padding */
}

Now, if you came across this question, because you are currently developing an HTML Email Template, than at first take my condolences. It is a realy horrible task, even (or especially) these days.

Writing HTML Emails is the only excuse to use deprecated HTML Elements and Attributes instead of up-to-date CSS Solutions, because the handling of CSS is very different from Email Client to Email Client, and most of them have some legacy support for deprecated Stuff. In every case, you should test as much as possible, to check out, if there may is an CSS solution, which works across the most common Clients (different Browser-, and Webclients, Outlook, Win10 Mail App, iOS and Android native Mail Apps, Inbox or Gmail App, and so on...). If it works: use CSS! Only use the old fashioned HTML, if this works better.

In every case you need to use inline CSS declarations, because most Email Clients cut off CSS defined in the <head>, and they won't load external files at all.

And now, to answer the question: with cellpadding and cellspacing it is not possible to set an individual padding or spacing for each side, you can just specify a number which applies to every side, unfortunately. But in this specific case, i think it is safe to use inline css with padding and / or margin, which is supported by most of the Email Clients, as far as I remember.

Matthias Seifert
  • 2,033
  • 3
  • 29
  • 41