ViewCSVOpen of plak een CSV-bestand en je krijgt een <table> met een <thead> met <th scope="col">-koppen en één <tr> per rij, of een volledige HTML-pagina die je direct kunt openen. Elke waarde wordt HTML-geëscapet, dus <script> of & in je gegevens verschijnt als tekst en wordt nooit markup. Het bestand wordt in je browser omgezet en nooit geüpload.
Zo zet je CSV om naar HTML
- Kies Bestand openen, sleep een
.csv-,.tsv- of.txt-bestand naar de tool, of kies Plakken. Zien de kolommen er niet goed uit, pas dan het scheidingsteken of de codering aan onder Importinstellingen. - Kies bij Resultaat voor Alleen de tabel om de markup in een bestaande pagina of cms te plakken, of voor Volledige HTML-pagina voor een zelfstandig bestand.
- Voeg een Bijschrift (optioneel) toe, kies de opmaak en wat er met regeleinden gebeurt, en kies daarna Kopiëren of ‘HTML downloaden’.
Voor een README of wiki is een Markdown-tabel meestal makkelijker te bewerken; voor een afdrukbaar bestand gebruik je CSV naar PDF.
Wat elke optie doet
| Alleen de tabel | De standaard. Alleen het element <table>, klaar om te plakken in een pagina, een e-mailsjabloon of een HTML-blok in een cms. |
|---|---|
| Volledige HTML-pagina | Voegt <!doctype html>, <html lang="en"> (op deze Nederlandse pagina lang="nl"), <meta charset="utf-8"> en een <title> toe (het bijschrift, of Table als er geen is), zodat het bestand in elke browser goed opent. |
| Bijschrift (optioneel) | Schrijft een <caption> als eerste element in de tabel: de toegankelijke naam die schermlezers voor de tabel voorlezen. |
| Eenvoudige opmaak toevoegen | Standaard aan. Op een volledige pagina wordt een klein stylesheet ingesloten: randen, een gearceerde kopregel en rechts uitgelijnde getallen. Met Alleen de tabel krijgt de tabel in plaats daarvan class="csv-table" en krijgen cellen met getallen class="num", zodat je eigen CSS het uiterlijk bepaalt. |
| Regeleinden binnen cellen tonen | Standaard aan. Een regeleinde binnen een waarde wordt <br>. Staat het uit, dan blijft het regeleinde in de broncode staan, waar browsers het als spatie tonen. |
Hoe lastige gegevens worden verwerkt
&,<,>,"en'worden in elke cel, kolomkop en elk bijschrift geschreven als&,<,>,"en'. Tags in je gegevens verschijnen als tekst; HTML die al in de CSV staat, wordt dus ook niet weergegeven.- Elke cel krijgt
dir="auto", zodat Arabische of Hebreeuwse waarden van rechts naar links worden getoond, ook binnen een pagina die van links naar rechts loopt. - Een kolom telt alleen als numeriek als elke niet-lege waarde een gewoon getal is; een kolom met nummers zoals
0042blijft tekst en wordt niet rechts uitgelijnd. De waarden zelf worden nooit anders opgemaakt. - Komma’s, aanhalingstekens en regeleinden tussen aanhalingstekens worden gelezen volgens RFC 4180. Een lege kolomnaam wordt
Column 3en een dubbelename (2). - Het resultaat is UTF-8. Een volledige pagina geeft dat aan met
<meta charset="utf-8">. Plak je Alleen de tabel in een andere pagina, dan moet die pagina ook UTF-8 zijn.
Problemen oplossen
- Letters met accenten zien er in het bronbestand uit als é. De CSV is geen UTF-8. Kies de codering onder Importinstellingen (bij oudere Excel-exports vaak Windows-1252) en open het bestand opnieuw.
- Tags uit mijn gegevens verschijnen als tekst. De HTML in je cellen is bewust geëscapet, zodat hij niet als markup kan worden uitgevoerd. Bewerk het resultaat als je de inhoud vertrouwt en hem weergegeven wilt hebben.
- De geplakte tabel heeft geen randen. Alleen de tabel voegt klassenamen toe (als opmaak aanstaat), geen CSS. Geef
.csv-tableentd.numopmaak in het stylesheet van je site, of kies Volledige HTML-pagina voor de ingebouwde opmaak. - Eén kolom bevat alle waarden. Het scheidingsteken is verkeerd geraden; stel het in onder Importinstellingen.
Grenzen en privacy
Bestanden tot 25 MB, 100.000 rijen of 2 miljoen cellen openen met een live voorbeeld van de eerste 200 rijen. Grotere bestanden worden in delen omgezet: het bestand wordt twee keer in stukken gelezen (eerst om de kolommen te meten en te bepalen welke numeriek zijn, dan om te schrijven), een melding zegt dat de download het hele bestand bevat, en Kopiëren wordt niet aangeboden. Eén uitvoerbestand is maximaal 4 GB.
Het omzetten gebeurt in een achtergrondproces in dit tabblad, zodat de pagina blijft reageren; met Annuleren stop je het. Het CSV-bestand wordt nooit naar een server gestuurd.
Voorbeeld
Een orderlijst met een ampersand, een apostrof, aanhalingstekens en HTML in een opmerking van twee regels, omgezet met de standaardinstellingen (Alleen de tabel, met opmaak, regeleinden getoond). qty bevat alleen getallen, dus die cellen krijgen class="num".
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>Vragen en antwoorden
Kan ik het resultaat veilig in mijn website plakken?
De gegevens kunnen geen markup injecteren: elke waarde, elke kolomkop en het bijschrift worden HTML-geëscapet, en een waarde komt nooit in een attribuut terecht. De enige tags in het resultaat zijn de tabelelementen die de converter zelf schrijft.
Waarom staat er lang="nl" in de pagina?
Een volledige pagina krijgt de taalcode van de site die je gebruikt: hier lang="nl", op de Engelse site lang="en". Pas het attribuut lang na het downloaden aan als je gegevens in een andere taal zijn.
Kan ik de HTML-tabel sorteren of filteren?
Het resultaat is een statische tabel zonder scripts. Sorteer of filter de gegevens eerst met CSV sorteren of CSV-rijen filteren, en zet ze daarna om.