Home » Internet » Tabulatoren in HTML einfügen – geht das? – Aufklärung

Tabulatoren in HTML einfügen – geht das? – Aufklärung

  • by Anatoli Bauer

Wer schon einmal versucht hat Text in HTML Quellcode wie in einem Textverarbeitungsprogramm zu formatieren, der kennt das Problem: Ob mehrere Leerzeichen, Leerzeilen oder Tabulatoren, alles wird im Browser auf ein einziges Leerzeichen reduziert. Das liegt am sogenannten „whitespace collaps“ (zu Deutsch: Leerraum Kollaps). HTML Parser unterscheiden nicht zwischen den verschiedenen Leerraumzeichen und reduzieren diese auf ein Minimum.

Doch was tun, wenn man Tabulatoren in einen Text einfügen möchte? Zum Glück bieten HTML und CSS mehrere Alternativen.

Verwendung von HTML-Entitäten

HTML-Entitäten sind reservierte Zeichenfolgen, welche bestimmte Symbole/Zeichen repräsentieren. Dazu zählen auch die geschützten Leerzeichen, die weder zu einem automatischen Zeilenumbruch führen noch von HTML Parsern reduziert werden. Als Ersatz für Tabulatoren sind dabei vor allem   (zwei Leerzeichen breit) und   (vier Leerzeichen breit) interessant. Diese Zeichenfolgen werden anstelle von Tabulatoren eingefügt. Auch mehrfache Aneinanderreihung ist möglich. Das ist die einfachste Lösung, größere Abstände an einzelnen Stellen eines Textes zu erzielen.

Vorformatierter Text

Übermäßiger Gebrauch von HTML-Entitäten kann schnell unübersichtlich werden und den Schreib- und Lesefluss des HTML Quellcodes stören. Besonders wenn es um die Darstellung von Code-Beispielen, ASCII-Bildern oder rein geschriebener Tabellen geht, ist die vorherige Lösung nicht praktikabel.
In solchen Fällen kann man Passagen mithilfe des pre Tags als vorformatierten Text deklarieren. Ein derartiger Absatz wird genauso angezeigt, wie er im Quellcode geschrieben steht. Mit der CSS-Eigenschaft tab-size lässt sich zudem einstellen, wie viele Leerzeichen breit ein Tabulator sein soll.
Es ist allerdings Vorsicht bei der Einbindung von vorformatierten Texten geboten, da sie anders dargestellt werden als normale Texte. So wird standardmäßig eine nichtproportionale Schriftart verwendet und automatische Zeilenumbrüche sind deaktiviert. Diese Eigenschaften müssen eventuell angepasst werden, damit sich der Text nahtlos einfügt.

CSS Tabulator

Die wenigsten Menschen arbeiten heutzutage ausschließlich mit HTML. CSS ist ein wichtiges Werkzeug zur Gestaltung von Webseiten und auch beim Wunsch nach Tabulatoren-Alternativen kann man darauf zurückgreifen.
Dazu wird ein leeres span Tag verwendet, dessen Länge mit der CSS-Eigenschaft margin-left oder margin-right festgelegt wird. Dieses wird, wie zuvor die geschützten Leerzeichen, anstelle von Tabulatoren im Text eingefügt. Im Vergleich zu den geschützten Leerzeichen, lässt sich die Weite der Abstände beliebig festlegen (inkl. relativer Abmessungen). Aber auch hier besteht die Gefahr, dass der Quellcode rasch unleserlich wird.

CSS und die Frage nach dem Sinn des Tabulators

HTML ist zur Strukturierung von Inhalten konzipiert, nicht aber zu deren Formatierung. Bevor man versucht Tabulatoren oder andere Leerzeichen zu erzwingen, ist es ratsam zu hinterfragen, wozu diese überhaupt verwendet werden und ob ihre Benutzung notwendig ist. Oftmals lassen sich Probleme mit CSS eleganter lösen:

Tabulatoren zur Einrückung einzelner Sätze

Die CSS-Eigenschaft text-indent kann als Ersatz dienen.

Tabulatoren zur Ausrichtung von Absätzen

Anstatt die Zeilen händisch einzurücken, lohnt es sich den Text in mehrere Abschnitte zu unterteilen und diese gegeneinander zu verschieben. Das gilt auch für die Darstellung von Text in Spalten, wenn es sich dabei nicht um eine Tabelle handelt.

Tabulatoren zur Erstellung von Tabellen

Hier empfiehlt es sich den Text in eine HTML-Tabelle umzuwandeln.

Tabulatoren um den Raum zu den Seitenrändern zu vergrößern

Die CSS-Eigenschaften margin oder padding sollten dem manuellen Einfügen von Abständen vorgezogen werden.

Hat dir der Beitrag gefallen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.