HTML-Tabellengenerator

Ein HTML-Tabellengenerator verwandelt Datenzeilen in das HTML-Markup, das sie als Tabelle in einem Browser rendert. Sie fügen kommagetrennte oder tabulatortrennte Werte ein, wählen aus, wie die Tabelle aussehen soll, und das Tool schreibt ein vollständiges <table>-Element mit <thead>, <tbody> und Tabellenzeilen und Zellen. Anstatt jedes <tr>, <th> und <td> von Hand einzugeben und Zellen zu zählen, um die Spalten ausgerichtet zu halten, fügen Sie die Daten einmal ein und kopieren Sie Backmarkup, das bereit ist, in eine Webseite, eine E-Vorlage oder eine Dokumentationsdatei zu legen.

Es existiert, weil das manuelle Schreiben von Tabelle HTML repetitiv und fehleranfällig ist Eine Tabelle mit zehn Zeilen und fünf Spalten benötigt mehr als fünfzig Zell-Tags, alle korrekt geöffnet und geschlossen, und ein einzelnes fehlendes </td> unterbricht das Layout Barrierefreiheit fügt mehr Details hinzu: Header-Zellen sollten <th> mit einem Scope-Attribut sein, sodass Bildschirmleser sie ankündigen, und eine Tabelle benötigt oft ein <caption>, das ihren Inhalt beschreibt Dieser Generator wendet diese Regeln für Sie an Die erste Zeile kann zu einem richtigen Header werden, die erste Spalte jeder Zeile kann zu einem Zeilenheader werden, und jeder Zellenwert ist HTML-entfernt, sodass Zeichen wie < und & als Text als Text angezeigt werden, anstatt die Seite zu brechen.

Die Konvertierung läuft clientseitig Die Daten, die Sie einfügen, werden analysiert und in JavaScript auf Ihrem eigenen Gerät konvertiert, sodass die Zeilen nie hochgeladen werden; Durch Drücken von Protokollen wird ein Nutzungsdatensatz generiert, der nur den Stilmodus enthält, und das Tool arbeitet weiterhin mit dem Netzwerk, das nach dem Laden der Seite getrennt wurde. Sie können auswählen, wie das Styling bereitgestellt wird: Moderne Klassennamen mit einem passenden CSS-Block, eigenständige Inline-Stile, die das Einfügen in eine E-Mail überleben, oder einfaches semantisches HTML ohne Styling Optionen für gestreifte Zeilen, Ränder, ein kompaktes Layout und eine Einrückung ermöglichen es Ihnen, die Ausgabe mit dem Projekt abzugleichen, in das Sie einfügen.

Hier ist ein funktioniertes Beispiel des Tabellen-HTML-Generators Fügen Sie drei Zeilen ein, `Plan, Price,Seats`, `Free, $0,1` and `Pro, "$1,200",10`, geben Sie Pricing als Bildunterschrift ein und drücken Sie auf GenerierenDie Ausgabe ist ein <table> mit <caption>Pricing</caption>, drei <th scope="col"> Headers und zwei Body Rows, und das zitierte "$1.200" bleibt eine Zelle, anstatt sich an seiner Komma aufzuteilen Wird als Tabellengenerator für HTML-E-E-Mails verwendet, switch Style zu Inline" >he und jeder Cell-Stile und eigene Paddredredge-Stile benötigt.