Tables can look intimidating but can be handled fairly easily with a combination of [[JavaScript]] and HTML. You'll want to use [[UI frameworks]] or else it will also require quite a bit of CSS.
First, simply initialize an empty table where you want it in your html (here we'll initialize with hard coded headers but you could extend this to read headers from the data source):
```HTML title="index.html"
<body>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody id='myTable'>
</tbody>
</table>
</body>
```
To get the data from a spreadsheet, rather than using the hard-coded data variable `data`, we need to add to our `Code.gs`:
```JavaScript title="Code.gs"
function getTableData(){
var ss ; //
var ws ; //
var data ; // ignore first row if using hard coded headers
return data;
}
```
Finally, write JavaScript (in a `<script>` tag) to load the table with data once loaded:
```JavaScript title="JavaScript.html"
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(populateTable).getTableData();
});
function populateTable(dataArray){
var tbody = document.getElementById("table-body");
dataArray.forEach(function(r){
var row = document.createElement("tr");
var col = document.createElement("td");
r.forEach(function(cell){
col.textContent = cell;
row.appendChild(col);
})
tbody.appendChild(row);
}));
}
```
In this code, we use an Event Listener to know when the empty table is loaded in the DOM, then run the `getTableData` function we wrote to grab the data and use the `withSuccessHandler` to pass that data to the function `populateTable`.
In `populateTable`, we have an outer loop that iterates through every row and an inner loop that iterates through every column (or cell in the row). The inner loop sets the text content of the `<td>` element to the value in each column then appends as a child element to the row. The outer loop is looping through each row, and once constructed by the inner loop, appends the entire row to the table body.