Kennisbank

EverWeb heeft geen functie om een tabel in te voegen. De beste manier om een tabel toe te voegen, is een kort stukje tabelcode te plakken in een widget HTML Knipsel (HTML Snippet): de tekst blijft echte tekst die zoekmachines en schermlezers kunnen lezen, en u wijzigt hem door de woorden aan te passen. U kunt ook een Google-spreadsheet tonen, dingen netjes naast elkaar zetten met een Container of, als laatste redmiddel, een afbeelding gebruiken.

Welke optie u gebruikt

Een tabel toevoegen met de widget HTML Knipsel

1. Open de pagina, klik op het tabblad Widgets en sleep HTML Knipsel naar de pagina.
2. Ga naar Details > Widget instellingen, plak de code hieronder in het vak HTML-code en klik op Toepassen.
3. Laat Embed Option (insluitoptie) op Auto staan, of kies Direct Embed (direct insluiten). Kies niet External Frame (extern frame): zoekmachines lezen de inhoud daarvan mogelijk niet.
4. Vink Adjust height to content (hoogte aanpassen aan inhoud) aan, zodat het vak meegroeit met de tabel.
5. Zet de widget op een responsieve pagina in een Container, of vink Volle breedte aan in Details > Formaten, zodat hij op het scherm past.
6. Klik op Voorbeeld om het te controleren en publiceer daarna.

Hier is een prijslijst die u kunt kopiëren. Vervang de woorden en prijzen door die van uzelf:

<div class="ew-table">
<table>
  <caption>Prices</caption>
  <thead>
    <tr><th>Service</th><th>Time</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Haircut</td><td>30 minutes</td><td>$35</td></tr>
    <tr><td>Cut and colour</td><td>90 minutes</td><td>$95</td></tr>
    <tr><td>Children's cut</td><td>20 minutes</td><td>$20</td></tr>
  </tbody>
</table>
</div>
<style>
.ew-table { overflow-x: auto; }
.ew-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ew-table caption { text-align: left; font-weight: bold; padding: 8px 0; }
.ew-table th, .ew-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dddddd; }
.ew-table thead th { background: #f2f2f2; }
.ew-table tbody tr:nth-child(even) { background: #fafafa; }
</style>

Zo past u hem aan:

• Een rij toevoegen: kopieer één hele regel die begint met <tr> en eindigt met </tr>, plak hem eronder en pas de woorden aan.
• Een kolom toevoegen: voeg nog een <th>...</th> toe aan de kopregel en nog een <td>...</td> aan elke andere rij.
• De titel wijzigen: pas de tekst in <caption> aan, of verwijder die regel als u geen titel wilt.
• Kleuren: vervang #f2f2f2 (kopregel) en #fafafa (elke tweede rij) door uw eigen kleuren.

Brede tabellen op telefoons

Door de regel overflow-x: auto kunt u op een telefoon zijwaarts door een brede tabel scrollen binnen het vak, in plaats van dat alle kolommen in elkaar worden gedrukt. Voeg bij een tabel met veel kolommen min-width: 700px; toe aan de regel .ew-table table, zodat de kolommen leesbaar blijven en bezoekers opzij vegen. Houd tabellen voor telefoons waar mogelijk bij ongeveer vier korte kolommen.

Hebt u de tabel al in Excel, Numbers of Google Spreadsheets? Een online "HTML table generator" (HTML-tabelgenerator) kan een geplakte spreadsheet omzetten in tabelcode. Plak alleen het deel <table> in het knipsel.

Een Google-spreadsheet tonen

Handig voor een wedstrijdschema of dienstregeling die elke week verandert: wijzigingen in de spreadsheet verschijnen na korte tijd op uw website, zonder dat u opnieuw hoeft te publiceren.

1. Kies in Google Spreadsheets File > Share > Publish to web (Bestand > Delen > Publiceren op internet), klik op het tabblad Embed (Insluiten), kies het blad en klik op Publish (Publiceren).
2. Kopieer de code die u krijgt (die begint met <iframe).
3. Plak die zoals hierboven in een HTML Knipsel. Vervang in de code width="..." door width="100%", zodat het op een telefoon past.

Iedereen kan een gepubliceerde spreadsheet zien, dus zet er geen privégegevens in. Zoekmachines tellen de spreadsheet mogelijk niet mee als onderdeel van uw pagina.

Dingen naast elkaar zetten met een Containerrij

Voor een paar kolommen tekst zonder rasterlijnen, zoals een adres links en openingstijden rechts, klikt u op Containers in de knoppenbalk, kiest u Containerrij en sleept u een tekstvak in elke kolom. Zet in Widget instellingen > Weergeven de optie Omloop op Omloop, zodat de kolommen op een telefoon onder elkaar komen. Omdat elke kolom als geheel naar beneden schuift, is dit niet geschikt voor gegevens die in rijen naast elkaar moeten blijven staan. Zie Een responsieve pagina bouwen met Containers, zodat alles netjes onder elkaar komt op een telefoon.

Een afbeelding van een tabel (laatste redmiddel)

U kunt de tabel maken in Pages, Word of Excel, hem als afbeelding bewaren en die aan de pagina toevoegen. Dat gaat snel, maar zoekmachines en schermlezers kunnen de woorden niet lezen, de tekst wordt piepklein op een telefoon en voor elke wijziging moet u een nieuwe afbeelding maken. Doet u het toch, beschrijf de tabel dan in de alt-tekst van de afbeelding, en link naar een pdf-versie die bezoekers kunnen vergroten en afdrukken: zie Hoe link ik naar een pdf zodat bezoekers die kunnen openen of downloaden?

Externe ontwikkelaars maken ook tabelwidgets voor EverWeb, zoals datatabellen, prijstabellen en doorzoekbare tabellen. U vindt ze op de pagina met EverWeb-uitbreidingen. Hoe u er een installeert, leest u in Widgets van derden installeren en gebruiken in EverWeb. De maker van de widget ondersteunt hem.

Gerelateerde artikelen

• Een boekingskalender, Instagram-feed of andere externe code toevoegen met de widget HTML Snippet
• Een responsieve pagina bouwen met Containers, zodat alles netjes onder elkaar komt op een telefoon
• Maak uw website toegankelijk: alt-tekst, koppen, linkteksten en contrast
• Een FAQ toevoegen met vragen die open- en dichtklappen (accordeon)
• Widgets van derden installeren en gebruiken in EverWeb