Spreadsheets zijn een mooie manier om informatie te ordenen.
Er zijn meerdere manieren om spreadsheets in te voegen binnen je website.

1. een statische sheet, waarbij je de informatie in een tabel op je pagina opslaat.
2. Een dynamische sheet, waarbij de informatie op jouw webpagina verandert als jij of iemand anders de google sheet aanpast.

Werken met Google sheets

Werken met Google sheets vraagt dat je met een Google account inlogt op sheets.google.com. De sheet die je hier maakt kan je op verschillende manieren delen, bijvoorbeeld via een link. Ook kan je zelf bepalen wie er toegang heeft tot de sheet.

Een statische sheet invoegen

Om een statische sheet in te voegen kopieer je dat deel van de sheet dat je wilt tonen op je website en je plakt het rechtstreeks in het paragraafblok.
Zoals voorbeeld hieronder

jaar 1jaar 2jaar 3jaar 4
index A123123123123
index B456456456456
Totaal579579579579
Voorbeeld statische sheet

Een dynamische sheet invoegen

Om een dynamische sheet in te voegen moeten we andere stappen zetten.
We moeten daarvoor een koppeling maken tussen de google sheet en jouw webpagina. Daarvoor gebruiken we de z.g. Embed-code. Dit is een <iframe>

Je volgt de volgende stappen:
1. iFrame ophalen van de sheet
2. iFrame code plakken op jouw website

Stap 1: De iFrame code ophalen
Ga naar jouw sheet en klik in het menu op Bestand (File)
In het dropdown menu kies je voor Publiceren op internet

De volgende stap is de embed-code ophalen. Daarvoor klik je in de pop-up op Invoegen (Embed)

Je krijgt dan de embed code <iframe> te zien. Deze moet je kopiëren. (CTRL+C)

De volgende stap is deze code te plaatsen op jouw website.
Daarvoor moet je het blok “Eigen HTML code” gebruiken. Je plakt de gekopieerde embed code hierin.

De embed code plakken in het blok HTML code

Dit is dan het resultaat:

Ok, je ziet dat de breedte te wensen overlaat.
Daarvoor gaan we de embed code iets aanpassen.
Selecteer het HTML blok en voeg parameters voor hoogte en breedte toe

Bijvoorbeeld  width=”100%” (dit zorgt ervoor dat de tabel zo breed wordt als jouw tekst) en height=”500″ (500 px hoogte van de tabel– dit kan je zelf aanpassen, afhankelijk van de hoogte van jouw sheet. Even uitproberen)

Aangepsate embed code met 100% breed en 500 hoog

Dit is dan het verbeterde resultaat:

Om de inhoud van deze sheet aan te passen ga je dus naar sheets.google.com. Aanpassingen die je daar doet worden automatisch getoond op jouw website.