HTML-tabel generator

Zo maak je een HTML-tabel

1. Vul het raster in. Gebruik Rij toevoegen, Kolom toevoegen, Laatste rij verwijderen en Laatste kolom verwijderen, of de ×-knoppen naast elke rij en kolom. Nieuwe lege tabel begint opnieuw met een leeg raster van 3 × 3.
2. Wil je bestaande gegevens hergebruiken, plak dan CSV of cellen uit Excel, LibreOffice of Google Sheets in CSV- of spreadsheetgegevens importeren, controleer het Scheidingsteken en klik op Importeren. Je kunt een blok spreadsheetcellen ook rechtstreeks in een willekeurige cel van het raster plakken.
3. Voeg een Bijschrift toe en kies of Eerste rij is een kopregel en Eerste kolom is een kopkolom gelden.
4. Kies onder Opmaak voor Geen stijlen, CSS-klasse of Inline stijlen, en pas desgewenst de Randkleur, de Achtergrond kopcellen en Gestreepte rijen aan.
5. Bekijk het Voorbeeld en klik dan op HTML kopiëren, of download de code als .html-bestand.

Toegankelijke tabelopmaak

Een tabel is pas toegankelijk als schermlezers kunnen zien welke cellen koppen zijn en wat ze beschrijven. Deze tool schrijft de structuur die de HTML-standaard en de WCAG-technieken aanraden:

• <caption> geeft de tabel een naam. Schermlezers lezen die voor als je de tabel binnengaat, en het helpt elke lezer te begrijpen waar hij naar kijkt. Houd het kort en beschrijvend.
• <thead> en <tbody> scheiden de kopregel van de gegevensrijen. Browsers kunnen de <thead> op elke afgedrukte pagina herhalen.
• <th scope="col"> markeert elke kolomkop, en met Eerste kolom is een kopkolom markeert <th scope="row"> de eerste cel van elke rij. Gaat een gebruiker van een schermlezer naar een gegevenscel, dan kan die de bijbehorende koppen voorlezen, zoals “Pro, Prijs, $12”.

Gebruik tabellen alleen voor gegevens in tabelvorm, nooit voor de opmaak van een pagina. Vermijd samengevoegde cellen waar je kunt: eenvoudige rasters met één kopregel en zo nodig één kopkolom zijn het makkelijkst te lezen met hulptechnologie.

Opmaakopties

• Geen stijlen schrijft kale opmaak die de tabelstijlen van je site overneemt. Dat is de beste keuze voor een CMS of een site met een designsysteem.
• CSS-klasse voegt class="…" toe aan de <table> en toont een bijpassend blok CSS om in je stylesheet te plakken. De Klassenaam wordt opgeschoond tot letters, cijfers, koppeltekens en underscores, zodat het altijd een geldige selector is.
• Inline stijlen zet style-attributen op elk element. Dat is omslachtig, maar precies wat HTML-e-mails nodig hebben, omdat veel e-mailprogramma’s <style>-blokken negeren. De knop Downloaden voegt de CSS in een <style>-element toe als je een klasse gebruikt.

Alleen echte hexadecimale kleuren uit de kleurkiezers worden in de CSS geschreven, dus er kan niets onverwachts in je stijlen terechtkomen.

Escapen en veiligheid

Elke cel wordt geëscapet: <, > en & worden <, > en &, zodat tekst zoals <b> of a < b precies zo verschijnt als je hem typt, in plaats van als opmaak te worden gelezen. Regeleinden in geïmporteerde cellen worden <br>. Het voorbeeld wordt alleen uit deze geëscapete opmaak opgebouwd en gaat door een sanitizer die uitsluitend tabelelementen overlaat, dus een geplakt script kan nooit worden uitgevoerd.