Bauwerkzeuge für Toolz.dev Bedeutet, ich schreibe viele HTML-Tabellen, in Dokumentation, in E-Mails an Benutzer, in gelegentlichen einfachen Landingpage Und eine Tabelle ist das eine Bit HTML, das niemand gerne von Hand schreibt Zehn Zeilen und fünf Spalten sind über fünfzig Cell-Tags, die alle in der richtigen Reihenfolge öffnen und schließen müssen, und eines fehlt </td> Leise bricht das ganze Layout Ich hatte einen Stapel Daten in einer Tabellenkalkulation und wollte das Markup, also baute ich einen Generator in die Seite einDas ist die Anleitung dazu.
tl; dr: Der Toolz HTML-Tabellengenerator Komma oder Tab-getrennte Daten nimmt und eine vollständige, zugängliche
<table>trotz<thead>,<tbody>und richtige Header-Zellen. Die erste Reihe kann werden<th scope="col">und die erste Spalte<th scope="row">Bildschirmleser kündigen also die richtigen Header an Fügen Sie eine Bildunterschrift, gestreifte Zeilen und Ränder hinzu und wählen Sie klassenbasiertes CSS, Inline-Stile für E-Mails oder einfaches semantisches HTML. Jede Zelle wird maskiert. Es läuft vollständig clientseitig: kein Upload, kein Signup, funktioniert offline.
Was ist ein HTML-Tabellengenerator?
Ein HTML-Tabellengenerator verwandelt Datenzeilen in das HTML-Markup, das sie als Tabelle in einem Browser rendert. Sie fügen kommagetrennte oder Tabulatorgetrennte Werte ein, wählen aus, wie die Tabelle aussehen soll, und das Tool schreibt eine vollständige <table> Element mit <thead>, <tbody>‘und die Reihen und Zellen in ihnen. Anstatt jedes von Hand zu tippen <tr>, <th>, und <td> Wenn Sie Zellen zählen, um die Spalten aufgereiht zu halten, fügen Sie die Daten einmal ein und kopieren das Sicherungsmarkup, das zum Ablegen bereit ist, in eine Seite, eine E-Mail-Vorlage oder eine Markdown-Datei, die rohes HTML ermöglicht.
Der Grund, warum sich ein Generator seinen Platz verdient, ist, dass Tabellen-HTML ausschweifend und repetitiv ist, und die Wiederholung ist der Ort, an dem sich Fehler verstecken Jede Zelle braucht ein öffnendes und ein schließendes Tag, Headerzellen unterscheiden sich von Datenzellen, und das Ganze muss rechteckig bleiben oder der Browser macht ein zerlumptes Durcheinander Das per Hand für alles jenseits einer winzigen Tabelle zu tun ist langsam und fehleranfällig Das Tool macht es deterministisch: Man gibt ihm die Werte, es produziert valide, entwichene, korrekt verschachtelte Markups.
Auf dem Rohmarkup befindet sich eine Barrierefreiheitsschicht, die ein handgeschriebener Tisch oft überspringt, und das ist der Teil, der mir am meisten am Herzen liegt. Ein richtig gebauter Tisch verwendet <th> Für Headerzellen mit einem scope Attribut, sodass unterstützende Technologie ankündigen kann, zu welchem Header eine bestimmte Datenzelle gehört, und sie kann einen tragen <caption> Beschreibung, was die Tabelle enthält Der WHATWG HTML Living Standard' s-Abschnitt über tabellarische Daten buchstabiert diese Elemente, und der Generator wendet sie für Sie an, anstatt Ihnen eine zu hinterlassen <div> Gitter, das wie eine Tabelle aussieht, aber auf einem Bildschirmlesegerät als Rauschen angezeigt wird.
Warum nicht einfach die Tabelle von Hand schreiben?
Für eine Zwei-mal-Zwei-Tabelle ist das Handschreiben schneller als das Öffnen eines Werkzeugs, und das sollten Sie Der Generator verdient seinen Keep auf den Tabellen, die tatsächlich schmerzhaft sind: die mit echten Daten, vielen Zeilen und einem Header Auf denen hat das Handschreiben drei wiederkehrende Fehlermodi.
Die erste ist eine kaputte Struktur Fehlt ein schließendes Tag unter fünfzig und der Browser' s Fehlerwiederherstellung macht etwas Unvorhersehbares, und man verliert Minuten bei der Jagd nach der Zelle, die es gestartet hat Die zweite ist inkonsistente Spalten Wenn eine Zeile vier Zellen hat und der Rest fünf, macht die Tabelle schief, und das Erkennen der kurzen Zeile in einer Wand von Tags ist wirklich hart. Die dritte ist das Entkommen: Daten einfügen, die eine enthalten <'n &oder ein Streuner " Direkt in eine Zelle und Sie haben entweder den Markup gebrochen oder ein kleines Injektionsloch geöffnet.
Der Generator entfernt alle drei Er paddet kurze Zeilen, so dass jede Zeile die gleiche Anzahl an Zellen hat und die Tabelle bleibt rechteckig, Sie schließt immer, was sie öffnet Und es HTML-escapes jeder Zellwert, so ein < wird < und als Text angezeigt wird, anstatt als Tag gelesen zu werden Was Sie einfügen, erhalten Sie sicher gerendert.
Hier die Entscheidung in einer Tabelle.
| Situation | einsetzen | wieso |
|---|---|---|
| Ein winziger Zwei-mal-Zwei-Tisch | Schreiben Sie es von Hand | Schneller als etwas zu öffnen |
| Echte Daten mit vielen Zeilen und einem Header | HTML-Tabellengenerator | Beim Entkommen, Nisten und Ausrichten brechen die Handtische |
| Sie möchten stattdessen eine Markdown-Tabelle | Markdown-Tabellengenerator | Dieselbe Idee, Markdown-Ausgabe mit GitHub-Geschmack |
| Sie möchten nur eine CSV anzeigen oder überprüfen | CSV-Betrachter | Lesen Sie die Daten, ohne ein Markup zu generieren |
Wie mache ich den Tisch zugänglich?
Das ist die Frage, die eine Tabelle, die lediglich genau aussieht, von einer trennt, die für alle funktioniert, also bekommt sie einen eigenen Abschnitt Zwei Dinge sind wichtig: Header-Zellen und eine Bildunterschrift.
Kopfzeilenzellen zuerst In einer echten Tabelle sollten die Zellen, die Zeilen oder Spalten kennzeichnen, sein <th>, nicht <td>& jede <th> Tragen sollte ein scope Attribut mit der Angabe, ob es eine Spalte leitet (scope="col"() oder eine Reihe (scope="row"). Bildschirmlesegeräte verwenden scope Den entsprechenden Header vor jeder Datenzelle anzukündigen, so hört ein Hörer & quot; Rolle: Engineer" statt eines bloßen & quot; Engineer" ohne Kontext Die Option generator's first-row-header emittiert <th scope="col"> Für die obere Zeile wird die Option für den ersten Spaltenkopf ausgegeben <th scope="row"> Für die führende Zelle jeder Körperzeile Das W3C' s WAI Tutorial on tables empfiehlt genau dieses Muster für einfache Datentabellen.
Die Bildunterschrift ist das zweite Stück A <caption> Element, das direkt im Inneren der Tabelle sitzt, gibt der Tabelle einen Titel, den assistive technology ausliest und den sehende Benutzer über dem Raster sehen Es ist das zugängliche Äquivalent des Satzes, den Sie sowieso über der Tabelle schreiben würden Der Generator fügt einen hinzu, wenn Sie das Bildunterschriftenfeld ausfüllen, und er entweicht ihm wie jeder andere Text Zwischen einer Bildunterschrift und Skoped-Headern ist die Ausgabe eine Tabelle, durch die ein Bildschirmleser navigieren kann, und nicht eine Form, durch die er stolpert.
Was ist der Unterschied zwischen den Stylingmodi?
Das Tool bietet drei Möglichkeiten, das Design bereitzustellen, denn wo der Tisch hingeht, ändert sich, was funktioniert.
Der Klassenmodus fügt der Tabelle Klassennamen hinzu und gibt einen passenden CSS-Block aus, den Sie in Ihr Stylesheet eingeben können. Dies ist die richtige Wahl für eine Website: Das Markup bleibt sauber, das Styling lebt an einem Ort und Funktionen wie die Verwendung von Zebrastreifen tbody tr:nth-child(even)(was nur von einem Stylesheet aus funktioniert Inline-Modus schreibt stattdessen die Styles direkt auf jedes Element mit style Attribute Das ist hässlicheres Markup, aber es ist das, was Sie für HTML-E-Mails benötigen, bei denen sich die meisten Clients entfernen <style> Blöcke und externes CSS, also muss Styling bei jedem Element mitfahren Keiner Modus gibt einfaches semantisches HTML ohne Klassen und überhaupt ohne Stile aus, was man will, wenn man ein eigenes Design-System hat und nur eine korrekte, zugängliche Struktur braucht, um es dran zu hängen.
Ich greife standardmäßig zum Klassenmodus, nur im Inline-Modus, wenn ich in eine E-Mail einfüge, und im No-Modus, wenn ich die Tabelle auf eine Website verschiebe, die ihre Tabellen bereits global gestylt. Mit dem Tool können Sie zwischen ihnen wechseln, ohne Ihre Daten erneut einzugeben. Daher ist es ein paar Klicks, alle drei zu versuchen, um zu sehen, was passt.
Wie benutze ich den Generator?
Der Ablauf beträgt vier Schritte Kommaseparierte oder Tabulatortrennte Zeilen in das Eingabefeld einfügen; das Trennzeichen wird automatisch erkannt, und Sie können es überschreiben, wenn Ihre Daten mehrdeutig sind Entscheiden Sie, ob die erste Zeile ein Spaltenkopf ist und ob die erste Spalte jeder Zeile ein Zeilenkopf ist Fügen Sie eine Beschriftung hinzu, schalten Sie gestreifte Zeilen, Ränder oder ein kompaktes Layout ein und wählen Sie klassenbasiertes CSS, Inline-Stile oder einfaches HTML aus Klicken Sie dann auf Generieren und Kopieren Sie das HTML sowie das passende CSS im Klassenmodus.
Das Parsen folgt RFC 4180, dem informellen Standard für CSV, sodass ein in doppelte Anführungszeichen gewickeltes Feld das Trennzeichen enthalten kann und ein doppeltes Anführungszeichen innerhalb eines zitierten Felds zu einem einzelnen Anführungszeichen wird. Das bedeutet, dass eine Zelle wie "Doe, Jane" Bleibt eine Zelle, anstatt sich am Komma zu teilen Und weil alles in Ihrem Browser läuft, können Sie Daten einfügen, die Kundennamen, interne Zahlen oder alles andere enthalten, was Sie auf einem Server nicht wollen würden, und es verlässt Ihren Computer nie Dieses clientseitige Modell ist das gleiche hinter dem Rest der Website, beschrieben in der Datenschutz Online-Tools Führung.
Wie passt das zu den anderen Tools?
Der HTML-Tabellengenerator befindet sich in einer kleinen Gruppe von Tools, die alle strukturierte Daten aufnehmen und Bereinigungsmarkups zurückgeben. Sein nächster Nachbar ist der Markdown-Tabellengenerator, die die gleiche Arbeit erledigt, aber Markdown mit GitHub-Geschmack für READMEs ausgibt und Probleme anstelle von HTML für Webseiten ausgibt Wenn Ihr generiertes Table' s Markup aufräumen möchte, oder Sie einen Stapel handgeschriebener Tabelle HTML zum Einrücken haben, wird die HTML-formatierer Verschönert es Und wenn man sich zwischen HTML - und Markdown-Dokumenten bewegt, wird die HTML-zu-Markdown-Konverter Rundreise erledigt, Tische inklusive.
Die verbindende Idee ist, dass Daten in einer Form leben und Sie sie in einer anderen benötigen, und ein deterministisches Tool macht die Übersetzung besser als eine Person, die Tags von Hand bearbeitet Wenn Sie für das Web bauen, wird die Webentwickler-Toolkit Zusammenfassung zeigt, wie diese zusammenpassen und die Entwicklerproduktivitätstools Der Leitfaden deckt den größeren Satz kleiner Versorgungseinrichtungen ab, die jeweils ein paar Minuten sparen, oft am Tag.
Ein gearbeitetes Beispiel aus dem Verfassen von Dokumentationen
Lassen Sie mich das konkret machen Ein Großteil der Dokumentation rund um die Seite ist eine Reihe von Feature-Vergleichen und Referenztabellen: welches Tool was macht, welche Grenzen wo gelten, was eine gegebene Option bedeutet Die meisten dieser Daten beginnen mit dem Leben in einer Tabellenkalkulation, denn in einer Tabellenkalkulation lässt es sich leicht bearbeiten und sortieren. Das Aufnehmen einer Seite bedeutete früher entweder den Export nach Markdown, den einige meiner Seiten nicht rendern, oder das manuelle Tippen der HTML-Tabelle, was für eine zwanzigreihige Referenz wirklich miserable zehn Minuten ist.
Nun kopiere ich die Spalten direkt aus der Tabellenkalkulation, die Tabulator-getrennte Werte in die Zwischenablage legt, füge sie in den Generator ein, lasse ihn den Tabulator-Begrenzer automatisch erkennen, ich behalte die erste Zeile als Kopfzeile, füge eine Beschriftung hinzu, die die Tabelle beschreibt, schalte gestreifte Zeilen und Ränder im Klassenmodus ein, kopiere sowohl das HTML als auch das CSS. Das Markup fällt in die Seite, das CSS geht einmal in das Stylesheet und wird danach von jeder Tabelle wiederverwendet, und das Ganze dauert unter einer Minute Die Headerzellen kommen als <th scope="col">„Die Tabelle ist also zugänglich, ohne dass ich darüber nachdenke, und jeder Wert wird ausgeblendet, sodass die Zeile, die a enthält < In einem Code-Verweis sprengt die Seite nicht.
Der Grund, warum ich den Generator verwende, anstatt diese Tabellen von Hand zu schreiben, ist nicht, dass das HTML hart ist, es ist, dass das HTML langweilig ist und die langweiligen Teile sind, in denen ich Fehler einführe. Durch das Auslagern des Tag-Typs, des Escapens und der Zugänglichkeitsattribute für ein Tool ist die Tabelle auf der ersten Einfügung korrekt, und ich wende meine Aufmerksamkeit auf den Inhalt der Tabelle statt auf deren Sanitäranlagen. Für E-Mails regeneriere ich dieselben Daten im Inline-Modus, da das Newsletter-Tool streifen lässt <style> Blocks, und die Inline-Version übersteht die Reise intakt.
Worin bestehen die wissenswerten Grenzen?
Ein paar ehrliche Kanten Das erste ist, dass dieses Tool baut Daten Tabellen, die Art mit Kopfzeilen und Wertezeilen Es ist kein Layout-Tool, und es macht keine Zwischenspeicherung oder Zeilenspannweite, die Tricks mit zusammengefügten Zellen, die Sie manchmal in komplexen Tabellen sehen Zusammengeführte Zellen machen eine Tabelle für Bildschirmleser ohnehin viel schwieriger zu navigieren, und für die überwiegende Mehrheit der tabellarischen Daten benötigen Sie sie nicht Wenn Sie wirklich einen zusammengefügten Header benötigen, der sich über mehrere Spalten erstreckt, ist das eine manuelle Bearbeitung des generierten Markups, und die HTML-formatierer Ordnung danach halten wird.
Die zweite ist, dass der Generator Ihre Daten als Text liest und nicht versucht, clever über Typen zu sein In jeder Zelle wird eine Zahlenspalte als Text ausgegeben, die genau richtig für die Anzeige ist; sie richtet keine Zahlen richtig aus oder fügt Tausende von Trennzeichen hinzu, denn das sind Styling - und Formatierungsentscheidungen, die Ihnen gehören, was sie garantiert ist, dass der Wert, den Sie eingefügt haben, der Wert in der Zelle ist, entgangen und unverändert.
Die dritte ist die Mehrdeutigkeit des Trennzeichens Die automatische Erkennung funktioniert, indem Sie das Trennzeichen finden, das die konsistenteste Spaltenanzahl über Ihre Zeilen hinweg liefert, und es ist zuverlässig für sauberes CSV und TSV. Wenn Ihre Daten wirklich mehrdeutig sind, zum Beispiel Werte, die in einigen Zeilen nicht zitierte Kommas enthalten, kann die Erkennung falsch erraten, weshalb das Trennzeichen eine manuelle Überschreibung und keine feste Entscheidung ist. Legen Sie es explizit fest und die Analyse ist deterministisch.
Schließlich ist das generierte CSS im Klassenmodus ein sinnvoller, neutraler Ausgangspunkt: ein leichter Kopfzeilenhintergrund, dünne Ränder, bequeme Polsterung Es ist zum Bearbeiten gedacht Ändern Sie die Farben, um Ihrer Marke zu entsprechen, passen Sie die Polsterung an, lassen Sie die Streifen fallen; Es ist gewöhnliches CSS mit klaren Klassennamen, und die Aufgabe von tool' besteht darin, Ihnen den ersten Entwurf zu speichern und nicht das endgültige Aussehen zu diktieren.
Häufig gestellte Fragen
Was ist ein HTML-Tabellengenerator? Ein HTML-Tabellengenerator wandelt Datenzeilen in das HTML-Markup um, das sie als Tabelle rendert. Sie fügen CSV- oder Tab-getrennte Werte ein und schreibt eine vollständige Element mit , und Zellen, sodass Sie nicht jedes Tag von Hand eingeben müssen.
Wie konvertiere ich CSV in eine HTML-Tabelle? Fügen Sie Ihre CSV in das Eingabefeld ein, behalten Sie die erste Zeile als Kopfzeile bei, wenn sie Spaltennamen enthält, wählen Sie Ihr Design aus und klicken Sie dann auf Generieren. Das Tool erkennt den Trennzeichen, erstellt die Tabelle und gibt Ihnen HTML, das Sie direkt in eine Seite kopieren können.
Wie mache ich den Tisch zugänglich? Verwenden Sie Kopfzeilenzellen und eine Beschriftung Schalten Sie den Kopf der ersten Reihe ein, damit Spaltentitel angezeigt werden , aktivieren Sie den Kopf der ersten Spalte für Zeilenbeschriftungen, und fügen Sie eine Beschriftung hinzu, die die Tabelle beschreibt Bildschirmlesegeräte geben dann den richtigen Header für jede Zelle bekannt.Was ist der Unterschied zwischen den Stylingmodi? Der Klassenmodus fügt Klassennamen und einen separaten CSS-Block hinzu, was am besten für eine Website geeignet ist. Der Inline-Modus schreibt Stile direkt auf jedes Element, was das Einfügen in eine E-Mail übersteht. Keiner Modus gibt einfaches semantisches HTML aus, sodass Sie Ihr eigenes Stylesheet anwenden können.
Sind Sonderzeichen in meinen Daten entgangen? Ja. Jeder Zellwert ist HTML-gescapt, daher werden Zeichen wie <, >, & amp; und & quot; als Entitäten geschrieben und als Text angezeigt, anstatt als Markup interpretiert zu werden Dadurch wird verhindert, dass die Tabelle bricht, wenn Daten Winkelklammern oder Amperezeichen enthalten.
Kann es Kommas in einer Zelle verarbeiten? Ja. Der Parser folgt RFC 4180, so kann ein Feld, das in doppelte Anführungszeichen gewickelt ist, das Trennzeichen enthalten, und ein doppeltes Anführungszeichen innerhalb eines zitierten Feldes wird zu einem einzigen Anführungszeichen Zitierte Kommata bleiben Teil der Zelle, anstatt eine neue Spalte zu starten.
Werden meine Daten irgendwo hochgeladen? Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser mit JavaScript auf Ihrem Gerät. Ihre Daten werden nie hochgeladen, protokolliert oder gespeichert, und das Tool arbeitet weiterhin mit dem Netzwerk, das nicht mehr verbunden ist, sobald die Seite geladen wurde.
Ist der HTML-Tabellengenerator kostenlos? Ja. Es ist völlig kostenlos ohne Anmeldung, ohne Wasserzeichen und ohne Nutzungsobergrenze Generieren Sie so viele HTML-Tabellen, wie Sie für persönliche oder kommerzielle Projekte benötigen.
