Größe, Farben und Hover-Verhalten einstellen – Vorschau und kopierbarer HTML/CSS-Code aktualisieren sich sofort.
Läuft lokal in deinem BrowserSpalten- und Zeilenzahl festlegen, Farbthema und Hover-Verhalten wählen: Vorschau und kopierbarer HTML/CSS-Code aktualisieren sich sofort.
Die Tabelle entsteht im Browser. Es wird nichts hochgeladen, Vorschau und Code sind dasselbe Markup, und der kopierte Code enthält weder Wasserzeichen noch Fremdlink.
Das Feld enthält einen <style>-Block und darunter die Tabelle: ein <table class="tftable" border="1"> mit der Kopfzeile in <thead> und den Zellenzeilen in <tbody>. Das CSS gilt nur für diese Klasse, deshalb brauchen zwei hier erzeugte Tabellen auf einer Seite keine eigenen IDs.
Die Vorschau darunter zeigt genau dieselbe Zeichenkette: sichtbar ist also, was der kopierte Code erzeugt. Die Beispieltexte (Spaltenkopf 1, Zeile:1 Zelle:1) stehen in der Sprache der Seite, ein Wasserzeichen oder ein Fremdlink ist nicht enthalten.
Spalten sind auf 1–50, Zeilen auf 1–100 begrenzt. Solange ein Feld leer ist oder außerhalb dieses Bereichs liegt, nennt die Statuszeile über dem Code den Bereich, und die Tabelle behält die letzte gültige Größe statt leer zu werden.
Beim Verlassen des Felds wird der Wert auf die nächste Grenze gesetzt: 999 wird zu 50, ein leeres Feld kehrt zum letzten gültigen Wert zurück. Buchstaben werden beim Tippen entfernt, aus 12abc wird 12.
Die Zeilenhervorhebung entsteht als CSS-Regel (table.tftable tbody tr:hover) statt als Skript; die eingefügte Tabelle braucht also kein JavaScript und keine eigene ID. Die Farben stammen aus sechs festen Paletten; ohne Stil bleibt nur das border-Attribut.
HTML kopieren legt den aktuellen Inhalt des Felds in die Zwischenablage. Der Code wird an keinen Server gesendet.