<!DOCTYPE html>
<html>
  <body>

    <div id="data"></div>

    <script type="text/javascript" src="../../src/tabletop.js"></script>
    <script type="text/javascript">
      var a,b;
      window.onload = function() { init() };

      var public_spreadsheet_url_1 = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html',
          public_spreadsheet_url_2 = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdE5OcDE1SENpT1g2R2JEX2tnZ3ZIWHc&output=html';

      function init() {
        a = Tabletop({
            key: public_spreadsheet_url_1,
            callback: showInfo,
            simpleSheet: true
        });
        b = Tabletop({
            key: public_spreadsheet_url_2,
            callback: showInfo,
            simpleSheet: true
        });
      }

      var count = 0;

      function showInfo(data, tabletop) {
        // data comes through as a simple array since simpleSheet is turned on
        var div = document.getElementById('data'),
            html = "<h1>SHEET " + (++count) + "</h1>",
            prop, i;
        for(i = 0; i < data.length; i++) {
          for(prop in data[i]) {
            html = html + "&nbsp;-&nbsp;" + data[i][prop];
          }
          html = html + "<hr><br>";
        }
        div.innerHTML = div.innerHTML + html;
      }
    </script>
  </body>
</html>