7.2.2.1 Tabellen zum vertikalen Ausrichten von Zeichen (Bsp. Schriftliches Rechnen)

Problembeschreibung: Manchmal ist es notwendig, Zeichen untereinander auszurichten. Im Wiki funktionieren jedoch weder die aus Textverarbeitungsprogrammen gewohnten Tabulatoren noch lassen sich mehrere Leerzeichen hintereinander setzen. Generell gibt es auch hierzu eine Vielzahl an Lösungsmöglichkeiten, wovon drei im folgenden Beispiel vorgestellt werden.

Lösungsansatz:

Tabellen nutzen und die Ausrichtung mit dem style-Attribut vornehmen.
Striche können als "border" oder als <hr> gesetzt werden.

Beispiel

Variante 1: Als einfacher Text

Die Ausrichtung wird manuell über „geschützte Leerzeichen“ mittels erzeugt. Vorteil ist, dass es bei wenigen, einfachen Anwendungen sehr schnell geht. Auf der Kehrseite steht der sehr unübersichtliche Quelltext und das optisch nicht perfekte Ergebnis.

monatliches Einkommen € 20.000

- monatliche Abzüge € 5.000
___________________________
= (restliche) Buchwert € 15.000

monatliches Einkommen € 20.000<br /> - monatliche Abzüge € 5.000<br /> ___________________________<br /> = (restliche) Buchwert € 15.000

Variante 2: Als Tabelle mit formatiertem Rahmen

Mittels style-Attribut können Tabelleneigenschaften wie Textausrichtung (horizontal und vertikal), Farben oder Ränder bestimmt werden. Vorteil ist, dass eine einmal erstellte Tabelle als Vorlage für viele weitere Verwendungen dienen kann. Nachteil ist, dass dieser Ansatz etwas mehr Übung bedarf. Soll eine durchgehende, horizontale Linie mittels Ränder erzeugt werden, entstehen in der Grundeinstellung kleine Lücken. Eine Lösung für dieses Problem bietet Variante 3.

	monatliches Einkommen	€	20.000
-	monatliche Abzüge	€	5.000
=	(restliche) Buchwert	€	15.000

{| |- | | monatliches Einkommen | € | style="text-align:right;" | 20.000 |- | style="text-align:center;border-bottom:1px solid black;" | - | style="border-bottom:1px solid black;" | monatliche Abzüge | style="border-bottom:1px solid black;" | € | style="text-align:right;border-bottom:1px solid black;" | 5.000 |- | = | style="font-weight:bold;" | (restliche) Buchwert | € | style="font-weight:bold;" | 15.000 |}

Variante 3: Tabelle mit zusätzlicher Zeile und formatierter horizontaler Linie per <hr>-Tag

Wie Variante 2, allerdings gibt es hier eine extra Zeile, die eine horizontale Linie (<hr>) enthält. Per style-Attribut werden die Zeile und die Linie auf das richtige Format gebracht.

	monatliches Einkommen	€	20.000
-	monatliche Abzüge	€	5.000

=	(restliche) Buchwert	€	15.000

{| |- | | monatliches Einkommen | € | style="text-align:right;" | 20.000 |- | style="text-align:center;" | - | monatliche Abzüge | style="" | € | style="text-align:right;" | 5.000 |- | colspan="4" style="margin:0px;padding:0px;"| <hr style="border:0.5px solid black;margin:0px;"> |- | = | style="font-weight:bold;" | (restliche) Buchwert | € | style="font-weight:bold;" | 15.000 |}

Aufgabe

Erstellen Sie diese Rechenaufgabe auf einer neuen LOOP-Seite.

	Bruttogehalt	€	3.752,00
+	Arbeitgeberanteil SV	€	742,67

=	Personalkosten	€	4.494,67

Websource

Die Wikipedia-Hilfe bietet eine gute Anlaufstelle, wenn Sie mehr Details zu Tabellenformatierungen benötigen.

https://de.wikipedia.org/wiki/Hilfe:Tabellen

https://de.wikipedia.org/wiki/Hilfe:Tabellen_f%C3%BCr_Fortgeschrittene