In "Code.GS"
function doGet(e) {
var x = HtmlService.createTemplateFromFile("Index");
var y = x.evaluate();
var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return z;
}
function getSheetData() {
var a= SpreadsheetApp.getActiveSpreadsheet();
var b = a.getSheetByName('Sheet1');
var c = b.getDataRange();
return c.getValues();
}
In Code For Index.HTMl
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
tr {
background-color: lightYellow;
}
tr:nth-child(2n) {
background-color: lightGrey;
}
</style>
</head>
<body>
<center><br>
<h2>Display google sheet data on webpage</h2>
<table border="3" style="border:1px solid black" 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></center>
</body>
</html>
Run
