How to align the table data to "centered" and format specific column to % values

Question

I am trying to create a daily email that sends daily report in a table format. Unfortunately, I am facing 2 problems with the code:

1. The table data is not aligned to center. Instead all the data are on the right side of the table.
2. Column SLA % should be in % format.

Attached is the look of the current email notification.

Below is the code I am using. Really appreciate anyone's advise

function getData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet1 = sheet.getSheetByName('Summary');
  var datavalues = sheet1.getDataRange().getValues();

  var html= "Dear All," + "\n\n" + "Please find the daily report as below. <br><br>" + '<table>';

  if(datavalues.length>0){

  for(var i=0; i<datavalues.length;i++){
  
  html+= '<tr style = bgcolor = "Black">';
  for(var j=0; j<datavalues[i].length;j++)
  {
    if(i==0)
    {
      html+= Utilities.formatString('<td bgcolor = "Orange";style = "border:2px solid black"<th>%s</th></td>' ,datavalues[i][j]);
    }
    else{
      html+= Utilities.formatString('<td style = "border:2px solid black" > %s</td>',datavalues[i][j]);

    }
  }
  }

  html+= '<table>';

}

return html;

}

function sendEmail(){
  MailApp.sendEmail({
    to:"[email protected]",
    subject: "Daily Report",
    htmlBody: getData()
  })


}

1. Table data to be in "centered" alignment
2. Column SLA % to be in % format

Answer 1

Suggestion

You would have to add a text-align:center HTML tag to center the table data. A simple if statement can then be used to display the values under the column SLA % to % format.

You can try modifying your existing for loop with this:

   for (var i = 0; i < datavalues.length; i++) {
      html += '<tr style = bgcolor = "Black">';
      for (var j = 0; j < datavalues[i].length; j++) {
        if (i == 0) {
          html+= Utilities.formatString('<td bgcolor = "Orange";style = "border:2px solid black"<th>%s</th></td>' ,datavalues[i][j]);
        }
        else {
          if (datavalues[0][j] == 'SLA %') datavalues[i][j] = (datavalues[i][j] *100).toFixed(2) + ' %'; //converts all entries under the SLA % column to % values then adds a % sign.
          html += Utilities.formatString('<td style = "border:2px solid black;text-align:center" > %s</td>', datavalues[i][j]);
        }
      }
    }

Sample data in Google Sheets

Email Output

Note that the code above only centers the table data. If you wish to center the table headers as well, you can replace

html += Utilities.formatString('<td bgcolor = "Orange";style = "border:2px solid black;text-align:center"<th>%s</th></td>', datavalues[i][j]);
       

with

html += Utilities.formatString('<th bgcolor = "Orange";style = "border:2px solid black">%s</th>', datavalues[i][j]);

Contents of the <th> </th> tags are centered by default.

Reference

HTML Horizontal alignment