html, body, #tbl {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

table {

  width: 100%;

  background-color: #cecece;

}

​

th {

  height: 70px;

}

​

tr {

  height: 35px;

}

​

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

​

caption {

  padding: 20px;

  color: #495366;

  text-align: left;

  letter-spacing: 1px;

}

const start = () => {

  // Initialize the JavaScript client library

  gapi.client.init({

    'apiKey': '{GOOGLE_API_KEY}',

    'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],

  }).then(() => {

    return gapi.client.sheets.spreadsheets.values.get({

      spreadsheetId: '{SPREADSHEET_ID}',

      range: '{SHEET_NAME}!{DATA_RANGE}', // for example: List 1!A1:B6

    })

  }).then((response) => {

    // Parse the response data

    const loadedData = response.result.values;

​

    // populate HTML table with data

    const table = document.getElementsByTagName('table')[0];

    // add column headers

    const columnHeaders = document.createElement('tr');

    columnHeaders.innerHTML = `<th>${loadedData[0][0]}</th>

<th>${loadedData[0][1]}</th>`;

    table.appendChild(columnHeaders);

​

    // add table data rows

    for (let i = 1; i < loadedData.length; i++) {

      const tableRow = document.createElement('tr');

      tableRow.innerHTML = `<td>${loadedData[i][0]}</td>

<td>${loadedData[i][1]}</td>`;

      table.appendChild(tableRow);

    }

  });

};

​

// Load the JavaScript client library

gapi.load('client', start);