Hello,
I'm making a HTML for send by email , and I noticed they are last made in tables , but , my question is if this is still needed.
There is some kind of risk if I does not do it in tables and css is not inline , because I just tried sending it to Gmail and it was normal.
>Thank you
Gmail is just a client, there are several such as Thunderbird (desktop), outlook.com (web), mail.yahoo.com (web) and every email system can render in a way , one of the biggest headaches of developers without a doubt is Outlook for Desktop.
Some important details for better compatibility among email clients:
You need to use inline styles, like this:
<div style="color: #fc0;">Exemplo</div>
In Outlook for desktop even in the latest version it does not recognize HTML5, so tags should be the same as HTML4.01, so instead of tags like section use only <div> , <span>
In outlook you also need to declare the DOCTYPE for HTML4 as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Remember, in order for it to work there can be no space before it, no line breaks.
Still in Outlook for Desktop it is necessary to eventually use the <meta http-equiv="X-UA-Compatible" content="IE=edge"> tag for better compatibility, as it uses the same HTML rendering engine
Emails sometimes disable CSS properties as position:; , so preferably never make your layouts based on it
Do not use advanced CSS3 properties to create any specific effect, it probably will not work on all email clients
HTML5 only inserted new tags and attributes and removed others and a more simplified and unified way of creating HTML, before we had multiple DOCTYPES and we still had XHTML, now it's practically everything only. Today HTML5 supports several things (not to mention everything) that XHTML supported, basically it can be HTML or XHTML, just adjust the content-type
<link href="http://..."> , external styles will be blocked <script> , this does not work at all Create an alternate version of the message in text format, this helps more obsolete e-mail readers who can not read html or sometimes fallback, PHPMailer and System.Net.Mail already do this (I believe), manually the structure would look something like:
Mime-Version: 1.0
Date: Sat, 03 Dec 2016 12:46:10 +0000
Content-Type: multipart/mixed;
boundary="----=MAIN"
Subject: teste
------=MAIN
Content-Type: multipart/alternative;
boundary="----=INNER"
------=INNER
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
Olá, mundo!
------=INNER
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="color: #fc0;">
Olá, <strong>mundo</strong>!
</div>
</body>
</html>
------=MAIN--
No problem people usually do so more for compatibility, depending on the e-mail reader may not be compatible, some still send the plain text version if the reader does not read html.
Just remembering that css as you said it needs to be inline.
I also leave here a link to complement my answer.