Alle Kategorien
Suche

Tabulator in HTML erzeugen - so gelingt's

Tabulator in HTML erzeugen - so gelingt's1:44
Video von Be El1:44

In einer HTML können Sie grundsätzlich nicht einfach so einen Tabulator erstellen lassen, da dieser vom Browser gar nicht oder nur als einfaches Leerzeichen verstanden werden würde. Allerdings haben Sie mehrere Möglichkeiten, um einen Tabulator anderweitig darstellen zu lassen. Welche das sind, erfahren Sie hier.

HTML-Tags verwenden

Um einen Tabulator in einer HTML-Datei zu erzeugen, können Sie dafür verschiedene HTML-Tags verwenden:

  • Am einfachsten gelingt dies dabei mit den pre-Tags. Dieser stellt den innerhalb der Tags enthalten Tag so dar, wie er geschrieben wurde, also auch mehrere Leerzeichen oder eben einen Tabulator. Dazu müssten Sie lediglich schreiben:
    <pre>   
             1. Tabulator
             2. Tabulator
    </pre>
  • Alternativ könnten Sie auch "blockquote" verwenden. Dieser wird genutzt, um ein Zitat zu erzeugen, wobei der jeweilige Text dann eingerückt wird. Sie können dabei auch einen weiteren blockquote-Tag einbauen, um einen weiteren Text noch weiter einrücken zu lassen. Dies könnte zum Beispiel so aussehen: <blockquote>1. Tabulator<blockquote>2. Tabulator</blockquote></blockquote>.
  • Außerdem könnten Sie mit dem "dd"-Tag einen Tabulator-Effekt erzeugen. Der Tag wird verwendet, um eine Definitionsliste zu erzeugen und dabei den Text innerhalb der dd-Tags einzurücken. So könnten Sie zum Beispiel "<dd>1. Tabulator</dd> <dd>2. Tabulator</dd>" schreiben.

Weitere Möglichkeiten für einen Tabulator

Neben den HTML-Tags könnten Sie einen Tabulator auch einfach über Leerzeichen oder mithilfe von CSS erzeugen.

  • Um einen Tabulator mit Leerzeichen zu erstellen, können Sie nicht einfach nur die Leertaste drücken und dann den Text schreiben, da Ihr Browser dann nur ein Leerzeichen erzeugen und die anderen Leerzeichen ignorieren würde. Vielmehr müssten Sie geschützte Leerzeichen mit "nbsp" (non-breaking space) verwenden. So könnten Sie zum Beispiel schreiben:
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. Tabulator<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. Tabulator
  • Um mit CSS in HTML einen Tabulator zu erzeugen, könnten Sie einen Abstand zum Außenrand festlegen lassen, was Sie mit "margin" machen müssten. Da Sie nur einen Abstand zum linken Rand brauchen, müssten Sie den Abstand auf diese Seite eingrenzen, also "margin-left" verwenden. Wenn Sie zum Beispiel also beim ersten Tabulator 20px Abstand und beim zweiten Tabulator 40px Abstand haben wollen, könnten Sie schreiben:
    <span style="margin-left: 20px;">1. Tabulator</span><br />
    <span style="margin-left: 40px;">2. Tabulator</span> 

Den HTML-Code für alle in dieser Anleitung erklärten Beispiele können Sie sich bei Sourcepod anschauen.

helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.