Toegankelijke HTML Tabel Generator: CSV naar HTML met Titel | We.Inc
Plak CSV of begin met een preset voor een prijslijst of openingstijden. Krijg een echte HTML-tabel met titel, kopcellen en scope, veilig ge-escaped, plus een klein responsive CSS-blok om te kopiëren.
Plak rijen uit een spreadsheet of CSV, of begin met een preset voor een dienstenprijslijst of openingstijden. U krijgt een echte HTML-tabel, met een titel, kopcellen en scope-attributen die schermlezers gebruiken, plus een kort CSS-blok dat de tabel leesbaar houdt op telefoons. Elke waarde wordt ge-escaped, zodat geplakte tekst uw pagina niet kan breken. Alles draait in uw browser. Niets wat u typt wordt naar We.Inc of iemand anders gestuurd, en het is weg zodra u het tabblad sluit.
Kies een preset of plak uw eigen rijen. Komma's, tabs (uit een spreadsheet) en puntkomma's werken allemaal, en waarden tussen aanhalingstekens met komma's erin blijven samen.
Kies of de eerste rij kolomkoppen bevat en of de eerste kolom elke rij labelt. Die worden th-cellen met scope-attributen.
Schrijf een titel. Deze noemt de tabel voor gebruikers van schermlezers en verschijnt erboven voor iedereen.
Kies een stijl en bekijk een voorbeeld op desktop- en telefoonbreedtes. Brede tabellen scrollen zijwaarts binnen hun eigen vak op kleine schermen in plaats van samen te persen.
Kopieer de HTML en de CSS, of download beide als één bestand.
Gebruik een tabel alleen voor data met rijen en kolommen, zoals prijzen of openingstijden. Gebruik voor paginalay-out in plaats daarvan CSS.
Houd koppen kort. Ze worden herhaald bij elke aankondiging van de schermlezer.
Zet eenheden in de kop (Prijs, USD) in plaats van in elke cel.
Voeg cellen niet samen tenzij het moet. Samengevoegde cellen zijn lastig te volgen met een schermlezer.
Controleer uw tabel op telefoonbreedte. Als er meer dan één zijwaartse swipe nodig is, overweeg dan om te splitsen.
Veelgestelde vragen
Wat maakt een HTML-tabel toegankelijk?
Een titel die de tabel noemt, th-kopcellen voor kolom- en rijkoppen, en scope-attributen die aangeven of een kop bij een kolom of een rij hoort. Schermlezers gebruiken deze om aan te kondigen bij welke kop elke waarde hoort. Deze generator voegt alle drie toe.
Waarom niet de tabel bouwen met divs?
Een raster van divs kan eruitzien als een tabel, maar ondersteunende technologie kan niet zien welke cel bij welke kop hoort. Een echt table-element draagt die betekenis gratis mee.
Hoe wordt een responsive tabel afgehandeld?
De tabel staat in een vak dat zijwaarts scrolt op smalle schermen. Het vak is focusbaar en gelabeld met de titel, zodat toetsenbordgebruikers het ook kunnen scrollen.
Worden mijn gegevens ge-escaped?
Ja. Ampersands, punthaken en aanhalingstekens in uw cellen worden omgezet naar HTML-entiteiten, zodat een cel met <script> als tekst wordt getoond in plaats van te worden uitgevoerd.
Kan ik rechtstreeks plakken vanuit Excel of Google Sheets?
Ja. Gekopieerde cellen komen aan gescheiden door tabs, wat de tool automatisch herkent.
Is dit gratis?
Ja, zonder aanmelding. De tool draait in uw browser.
Prijslijsten en openingstijden zijn tabellen
De meeste kleinbedrijfssites hebben minstens twee tabellen: wat dingen kosten en wanneer u open bent. Beide zijn echte tabulaire data, dus ze horen als tabellen te worden opgemaakt, met elke prijs gekoppeld aan de dienst en elke tijd gekoppeld aan de dag.
De presets hier geven u een start met die twee vormen. Vervang de voorbeeldrijen door uw eigen gegevens voordat u publiceert; het zijn plaatshouders, geen echte prijzen.