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.
Alles läuft in Ihrem Browser Die Daten, die Sie einfügen, werden analysiert und in JavaScript auf Ihrem eigenen Gerät konvertiert, sodass nichts hochgeladen, protokolliert oder gespeichert wird und das Tool weiterhin mit dem Netzwerk arbeitet, das die Verbindung trennt, sobald die Seite geladen wurde Sie können wählen, wie das Styling bereitgestellt wird: Moderne Klassennamen mit einem passenden CSS-Block, in sich geschlossene Inline-Stile, die es überleben, in eine E-Mail eingefügt zu werden, oder einfaches semantisches HTML ohne Styling. Optionen für gestreifte Zeilen, Ränder, ein kompaktes Layout und Einrückungen lassen Sie die Ausgabe mit dem Projekt abgleichen, in das Sie es einfügen.
Komma-getrennte oder Tabulator-getrennte Zeilen in das Eingabefeld einfügen Der Trennzeichen wird automatisch erkannt, oder Sie können es manuell einstellen, wenn die Daten mehrdeutig sind.
Entscheiden Sie, ob die erste Zeile ein Spaltenkopf ist und ob die erste Spalte jeder Zeile ein Zeilenkopf ist, damit Bildschirmleser die richtigen Zellen ankündigen.
Fügen Sie eine Beschriftung hinzu, schalten Sie gestreifte Zeilen oder Ränder ein, wählen Sie ein kompaktes Layout und wählen Sie klassenbasiertes CSS, Inline-Stile oder einfaches semantisches HTML.
Klicken Sie auf Generieren, um die Tabelle zu erstellen, kopieren Sie dann das HTML und im Klassenmodus das passende CSS in Ihr ProjektAlles bleibt in Ihrem Browser.
Komma, Tabulator, Semikolon oder durch Rohrleitungen getrennte Daten einfügen Der Trennzeichen wird automatisch erkannt, und zitierte Felder mit eingebetteten Trennzeichen werden korrekt analysiert.
Die erste Zeile kann <th scope= "col"> und die erste Spalte <th scope=" row"> werden, sodass die assistive Technologie Header für jede Datenzelle ankündigt.
Emit-Klassennamen mit passendem CSS-Block, eigenständigen Inline-Stilen für E-Mails oder einfachem semantischem HTML ohne Styling, je nachdem, wo die Tabelle landet.
Fügen Sie Zebrastreifen, Zellränder, ein kompaktes Layout und ein <caption>-Element hinzu, die alle einheitlich in jeder Zeile der Tabelle angewendet werden.
Format, beautify, and minify HTML online. Re-indents messy or minified markup, keeps script, style, and pre content verbatim, and runs entirely in your browser.
Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. 100% client-side.
Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM
Generate a linked table of contents from Markdown headings
0 comments
No comments yet. Be the first to share your thoughts!