Html sent using the php function called mail() is not display as expected when received

Question

I have this php script that generates html tables and sends them via mail() function.

here is a sample of the generated html code :

<table style="border-collapse: collapse;">
<tbody>
<tr>
    <td style="border: 1px solid black;"><b>Dates</b></td>
    <td style="border: 1px solid black;"><b>05/07</b></td>
    <td style="border: 1px solid black;"><b>06/07</b></td>
    <td style="border: 1px solid black;"><b>07/07</b></td>
    <td style="border: 1px solid black;"><b>08/07</b></td>
    <td style="border: 1px solid black;"><b>09/07</b></td>
    <td style="border: 1px solid black;"><b>10/07</b></td>
    <td style="border: 1px solid black;"><b>11/07</b></td>
</tr>
<tr">
    <td style="border: 1px solid black;">Pointage personnel</td>
    <td style="border: 1px solid black;">35</td>
    <td style="border: 1px solid black;">38</td>
    <td style="border: 1px solid black;">38</td>
    <td style="border: 1px solid black;">38</td>
    <td style="border: 1px solid black;">38</td>
    <td style="border: 1px solid black; background-color:Tomato;">0</td>
    <td style="border: 1px solid black; background-color:Tomato;">0</td>
</tr>
...
</tbody></table>

Here is the php code for sending the email :

/// Sending emails
 $headers = 'MIME-Version: 1.0' . "\r\n";
 $headers .= 'Content-Type: text/HTML; charset=utf-8' . "\r\n"; // or utf-8
 $headers .= 'Content-Transfer-Encoding: 8bit'. "\r\n";
 $headers .= 'From: ABC <[email protected]>' . "\r\n";
 $listEmails = [
     "[email protected]",
     "[email protected]",
 ];
 foreach ($listEmails as $email){
     mail($email,"# REPORTING  #",nl2br($html),$headers);
 }

Here is how the genereted html is displayed on the browser when i use echo (before sending the email) :

Here is how it is displayed on Outlook or gmail after being sent via mail() function:

I tried "inspect element" on gmail side here is the html code that i got :

<table style="border-collapse:collapse;border:none" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
    <td style="border:solid black 1.0pt;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>Dates</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>05/07</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal" >
            &lt; td style="border: 1px solid black; border-collapse: collapse; padding: 4px; text-align: center;"&gt;<b>06/07</b><u></u><u></u>
        </p>
        <p class="MsoNormal">
            <b>07/07</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>08/07</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>09/07</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>10/07</b><u></u><u></u>
        </p>
    </td>
    <td style="border:solid black 1.0pt;border-left:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            <b>11/07</b><u></u><u></u>
        </p>
    </td>
</tr>
<tr>
    <td style="border:solid black 1.0pt;border-top:none;padding:3.0pt 3.0pt 3.0pt 3.0pt">
        <p class="MsoNormal">
            Pointage personnel<u></u><u></u>
        </p>
    </td>
    ...
</tr>
...
</tbody></table>

It's probably not relevant, but what happens if you don't use nl2br on the HTML? — ADyson
– ADyson, Commented Jul 12, 2021 at 11:17
What's odd is that the problem does not occur in the same table or cell. Each time i run the script a random cell or table is a affected. — Hawk Red
– Hawk Red, Commented Jul 12, 2021 at 13:07
I searching more for a solution, i suspect the problem is due to using HTML Shorthand Properties : Instead of using ( border: 1px solid black;) i should use ( border-width: 1px ; border-style: solid; border-color: black;) I'll do some more testing, once i'm sure i'll post this as an answer. — Hawk Red
– Hawk Red, Commented Jul 13, 2021 at 11:42
In your screenshot, it appears there is a white space character between the < and td character sequences, which may throw off the parsing of the HTML by the client application. However I’m not seeing that same white space in your snippet - can you confirm the code in your snippet matches exactly with what you’re actually working with? — esqew
– esqew, Commented Jul 13, 2021 at 11:45

Hawk Red · Accepted Answer · 2021-07-14 10:56:40Z

1

The issue comes from using shorthand css properties while styling the HTML. In my case i was using :

<td style = "border: 1px solid black;"> cellText </td>

I should write my inline css like this inst

<td style = "border-width: 1px ; border-style: solid; border-color: black;">
   cellText 
</td>

I Have made this change in my code and tested it and the issue was gone.

answered Jul 14, 2021 at 10:56

Hawk Red

1392 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Html sent using the php function called mail() is not display as expected when received

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related