Tabulator in HTML erzeugen - so gelingt's

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.