Een Google document of spreadsheet laten zien in je webpagina

Je wil elke week de resultaten aanvullen van de gespeelde wedstrijden van je club. Dan is werken met een gepubliceerd Google-document of -spreadsheet waarschijnlijk een mogelijke oplossing! Hier de stappen op een rijtje:

Inleiding: wat is het probleem?

Als je het document eerst in excel maakt en je wilt het dan ook op de site, dan heb je vaak problemen. Zo'n excel past niet makkelijk in een website. Ook als je er een afbeelding van maakt, lukt het vaak niet: de tabel is vaak te breed, én aanpassen nadien vb elke week is veel werk... Veel problemen dus.

Een oplossing is een document in de cloud maken én daar ook bijhouden. Je hoeft dan maar één keer de gepaste code te plakken in een pagina. Alle wijzigingen die je in de cloud aanbrengt, zijn enkele minuten later ook te zien op je website.

Hoe doe je dat? Een stappenplan:

stap 1: Meld je aan bij Google-drive.
Klik de knop 'Maken' linksboven.
Kies document of  spreadsheet naar keuze.

stap 2: Maak nu je document of tabel op zoals je dat zelf wilt.
Formules vind je onder de functie-knop (zie afbeelding hierboven)

stap 3: Je moet nu het formulier publiceren op het internet (zodat iedereen het kan zien, ook zonder wachtwoord) en ook gaan embedden in je website (zodat het in je bladzijde getoond wordt).
We bekijken hieronder hoe dat in zijn werk gaat.

Ga naar Bestand in de menubalk.
Kies in het menu voor: "Publiceren op internet"

stap 4: In het venster dat nu verschijnt (=zweeft boven je drive) kies je voor de knop 'Publiceren':

publiceren op internet

Wissel nu van tabblad. Kies: 'Invoegen'

Je ziet nu de code. Rechtermuisklik in de code: kopiëren

Sluit dat schermpje (klikken op x in rechterbovenhoek)

stap 5: Ga naar je website, log in en ga naar de pagina waar je tabel moet staan.

Je plakt de gekopieerde code gewoon in een tekstvak, NADAT je eerst de code-knop hebt ingedrukt.
 
Maar als je zou gaan kijken, dan krijg je een klein vakje. Veel te klein voor je bezoeker. Dus moet je eerst nog wat code toevoegen om de grootte en de breedte te bepalen.
stap 6: Wat je moet toevoegen zie je hieronder:
width="540" (zo bepaal je de maximale breedte in onze pagina's, nooit meer!)
height="1000" (zo bepaal je de lengte van het formulier)
WEL telkens met een spatie voor en achter, maar zonder spaties in dat stukje code én met de haakjes meteen voor en na het cijfer.
 

Via de code-knop kun je eventueel nadien de lengte nog aanpassen. Dat moet je zeker doen om schuifbalken rechts te vermijden. De breedte zet je best op 540, anders schuift het zichtbare deel onder de rechterrand van je site (en komt er een schuifbalk onderaan, wat best vermeden wordt)


Merk op: De taak van het bijhouden van het bestand (vb de stand van een competitie) hoeft dus NIET persé door de webmaster te gebeuren! Iedereen kan de cijfers typen in Drive, en meteen is zijn aanpassing voor iedereen die op de site gaat kijken zichtbaar!

Extra 1: Als je in de code bij frameborder de 0 vervangt door een 1, dan zie je de randen van de tabel. Soms is dat beter, zeker tegen een witte achtergrond:

Extra 2: Gebruik veel afkortingen in de tabel, om het compact te houden.
In plaats van gemiddelde, zou je gem. kunnen noteren...
Noteer dan eventueel wel de gebruikershandleiding (=wat elke afkorting betekent...) er meteen onder of boven.

Lees verder: