Custom tabellen (Mosaic/Stories)

Gewijzigd op Ma, 5 Jan om 4:04 PM

Wanneer data te uitgebreid is of te ver uit elkaar ligt, biedt een custom tabel een goede oplossing. 

Deze tabel tegel staat onder add tile -> custom -> Table. In de instellingen kunnen onder andere een title, subtitle, source en footer worden opgegeven (zowel vaste waarden als flexibele get-statements). De inhoud van de tabel wordt geconfigureerd in de Table content code in de instellingen van de tegel. Ook de inhoud van de tabel kan worden gevuld met zowel vaste waarden, als met flexibele get-statements. 

De custom tabel wordt volgens een vaste structuur opgebouwd. 

Voorbeeld:

Onderstaande Excel tabel wordt omgezet naar een custom tabel tegel:

In de eerste cel (A1) moet een 'x' staan.

De 'h' in kolom A staat voor header files. Deze kunnen een andere kleur krijgen.

De 'r' in kolom A staat voor een normale rij.

De 't'in kolom A en op rij 1 staat voor totalen. Deze kunnen ook een andere kleur krijgen.

De 'c' in rij 1 staat voor normale kolommen.

Codes voor uitlijning:

c.l (links)

c.r (rechts)

c.c (center)

c.25 25% breedte van de hele tabel

c.r25 rechts uitlijnen met een breedte van 25% van de tabel

Sla dit bestand op als CSV.

Open het CSV-bestand in een tekst editor zoals bijvoorbeeld kladblok.

Kopieer de tekst uit de teksteditor in de tegel onder Tabel content code:

Het resultaat:

Extra opties

#cspan#    Samenvoegen van twee kolommen

#rspan#    Samenvoegen van twee rijen

Html codering:

Het is ook mogelijk om eenvoudige HTML elementen in de customtabel op te nemen. Hieronder staat een overzicht van de elementen die zijn toegestaan. Het is mogelijk om verschillende elementen met elkaar te combineren.


<strong>benadrukt de komende tekst (screenreader intonatie) en zoekmachines weten dat dit belangrijk is. Tevens vet.

    <strong>Let op:</strong> dit formulier kan niet worden opgeslagen.

    Let op: dit formulier kan niet worden opgeslagen.

<b>Vet afgedrukt (uiterlijk)

    Let op: dit formulier kan niet worden opgeslagen.

<em> benadrukt de komende tekst (screenreader intonatie) en zoekmachines weten dat dit belangrijk is. Tevens cursief. 

    We moeten dit <em>vandaag</em> afronden.

    We moeten dit vandaag afronden.

<i>Cursief afgedrukt (uiterlijk)

    We moeten dit vandaag afronden.

<u>Onderstreep een woord

    Let op: dit <u>formulier</u> kan niet worden opgeslagen.

    Let op: dit formulier kan niet worden opgeslagen.

<sup>superscript

    Let op: dit <sup>formulier</sup> kan niet worden opgeslagen.

    Let op: dit formulier kan niet worden opgeslagen.

<sub>subscript

    Let op: dit <sub>formulier</sub> kan niet worden opgeslagen.

    Let op: dit formulier kan niet worden opgeslagen.

<br>line break

    Let op: dit <br>formulier kan niet worden opgeslagen.

    Let op: dit
    formulier kan niet worden opgeslagen.

<a>anchor / hyperlink

    Bezoek de <a href="https://abfresearch.nl" target="_blank">ABF Research website</a> hier

    Bezoek de ABF Research website hier

<span>inline: <span style="color: white; font-size: 12px; background-color: blue;">elementen<span> zoals kleur letterhoogte 

    inline: elementen zoals kleur letterhoogte instellen

    Wat dus een witte tekst op een blauwe achtergrond geeft.

<h1 - h6> Header lettergrote

<h1>

Bezoek de ABF Research site

<h2>

Bezoek de ABF Research site

<h3>

Bezoek de ABF Research site

<h4>

Bezoek de ABF Research site

<h5>

Bezoek de ABF Research site

<h6>

Bezoek de ABF Research site