tabletop-aligxintoj.html

<ul id="aligxintoj"></ul>

<script src="https://unpkg.com/tabletop/src/tabletop.min.js"></script>

<script>
  function listigi(datumo) {
    const ul = document.getElementById("aligxintoj");
    datumo.forEach(function(homo) {
      const li = document.createElement("li");
      li.innerHTML = `${homo.Nomo} (${homo.Lando})`;
      ul.appendChild(li);
    })
  }

  if (document.getElementById("aligxintoj")) {
    const url = "https://docs.google.com/spreadsheets/d/IDENTIGILO/pubhtml?gid=NUMERO&single=true";
    Tabletop.init({key: url, callback: listigi, simpleSheet: true})
  }
</script>

Nepre anstataŭigu la url per la ligilo donita de Google Spreadsheet.

Eblas ŝanĝi la aspekton en tiu linio:

li.innerHTML = `${homo.Nomo} <span style="color: gray">${homo.Lando}</span>`;

Notu ke Nomo kaj Lando estas la titolo de la kolumnoj en la dokumento. Ŝanĝu se bezonata.

Eblas aldoni stilon per:

<style>
  #aligxintoj li { list-style: none; }
</style>