Google app script: How could I add some styles to my automating email?

Question

I have this code in Google Apps Script to automatically receive an email when a google form is completed, but I am not able to edit the styles yet. The inline styles, as I tryed, is not working. I'd like to add a table, change my fonts or even colours.

Code:

function formSubmitReply(e) {

var alUser = e.values[1];
var entity = e.values[3];
var language = e.values[2];
var category = e.values[4];
var title = e.values[5];
var questions = e.values[6];
var attach = e.values[7];
var entityEn = e.values[8];
var categoryEn = e.values[9];
var titleEn = e.values[10];
var questionsEn = e.values[11];
var attachEn = e.values[12];

var userEmail = "[email protected]" + "," + "[email protected]";    

var msgFr = "<p>You have received a new inquiry</p>" + 
          "<h4>AL user: </h4>" + alUser + 
          "<h4>Entité </h4>" + entity + 
          "<h4>Langue préférée: </h4>" + language +
          "<h4>Catégorie de la demande: </h4>" + category + 
          "<h4>Titre de la demande: </h4>" + title + 
          "<h4>Contenu de la demande  </h4>" + questions + "<br>" +
          "<h4>Ajouter: </h4>" + attach + "<br>";     

var msgEn = "<p>You have received a new inquiry</p>" + 
          "<h4>AL user: </h4>" + alUser + 
          "<h4>Entity: </h4>" + entityEn + 
          "<h4>Preferred Language: </h4>" + language +
          "<h4>Category: </h4>" + categoryEn + 
          "<h4>Title: </h4>" + titleEn + 
          "<h4>Question: </h4>" + questionsEn + "<br>" +
          "<h4>Attachments: </h4>" + attachEn + "<br>";          

MailApp.sendEmail({
  to: userEmail,
  subject: 'NAM HR Mailbox | ' + category,
  htmlBody: (language=="English") ? msgEn : msgFr
});

}

How I receive my auto email:

Answer 1

You need to properly style the table if you want it shown in table. Try this to add a sample table, change font and color:

Code:

var msgEn = 
  "<p>You have received a new inquiry</p>" +
  // Add table style and format the cells with th and tr 
  "<table border='1' style='border-collapse:collapse'>" +
    "<tr>" +
      "<th>AL user:</th>" +
      // Add font style
      "<th style='font-family:courier;'>Entity:</th>" +
      "<th>Preferred Language:</th>" +
      "<th>Category:</th>" +
      "<th>Title:</th>" +
      "<th>Question:</th>" +
      "<th>Attachments:</th>" +
    "</tr>" +
    "<tr>" +
      "<td>" + alUser + "</td>" +
      // Add font color
      "<td style='color:red;'>" + entityEn + "</td>" +
      "<td>" + language + "</td>" +
      "<td>" + categoryEn + "</td>" +
      "<td>" + titleEn + "</td>" +
      "<td>" + questionsEn + "</td>" +
      "<td>" + attachEn + "</td>" +
    "</tr>" +
  "</table>";

Output:

As you can see, I have edited the font and color of column Entity to courier and red respectively