javascript google-apps-script web-applications

How to inherit HTML to Google WebApp from Google Sheets Data?

I want to inherit the HTML designing from Google sheets data to Google web app output, I tried using innerHTML but I don't know where to exactly apply that in the code.

Example screenshot code below, I want to bolt the word General in google web app

Code.gs

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('DisplaySheet');
  return htmlOutput.evaluate();
}

function getSheetData()  { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data'); 
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();  
  return dataValues;
}

DisplaySheet.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Display Google Sheet Web App</h1>
    <table border="1" cellpadding="5px" >
    <?var tableData = getSheetData();?>
    <?for(var i = 0; i < tableData.length; i++) { ?>
      <?if(i == 0) { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <th><?= tableData[i][j] ?></th>
        <? } ?>
        </tr>
      <? } else { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td><?= tableData[i][j] ?></td>
        <? } ?>
        </tr>
      <? } ?>
    <? } ?>
    </table>
  </body>
</html>

OutPut

Solution

Solution:

You need to use force-printing scriptlets, which do not enclose the string in hidden escape characters, to allow HTML formatting.

In your DisplaySheet.html, use <?!= tag instead of <?=:

<td><?!= tableData[i][j] ?></td>

Sample:

References:

Templated HTML