Ausrichtung von Tabellen

Tabellen sind standardmäßig links ausgerichtet und der nachfolgende Text wird unterhalb der Tabelle platziert.

<table align="Wert">...</table>

Dabei können dem Attribut align folgende Werte zugewiesen werden:

• align=„left“: Die Tabelle wird links platziert, der Text fließt rechts.
• align=„right“: Die Tabelle wird rechts platziert, der Text fließt links.
• align=„center“: Die Tabelle wird zentriert, der Text beginnt in der nächsten Zeile.

<td align="Ausrichtung">...</td>

Erweitert man den Tag <td> um das Attribut align, so kann man die horizontale Ausrichtung des Zelleninhalts festlegen. Dem Attribut align können dabei folgende Werte zugewiesen werden:

• align=„left“: Der Text wird linksbündig innerhalb der Zelle ausgerichtet.
• align=„right“: Der Inhalt der Zelle wird rechtsbündig ausgerichtet.
• align=„justify“: Der Text wird als Blocksatz ausgerichtet. Diese Attribut wird jedoch nicht von allen Browser erkannt, weshalb der Text schließlich linksbündig angezeigt wird.
• align=„center“: Der Text wird in der Mitte der Zelle dargestellt.

<td valign="Ausrichtung">...</td>

Entsprechend kann man auch die vertikale Ausrichtung der Inhalte in jedem Tabellenfeld steuern. Ohne Angabe des Attributs wird der Text innerhalb der Zelle automatisch vertikal mittig dargestellt.
Das Attribut valign kann dabei folgende Werte annehmen:

• valign=„top“: Der Text wird in der Zelle oben ausgerichtet.
• valign=„middle“: Der Inhalt der Zelle wird vertikal gesetzt.
• valign=„bottom“: Der Text wird unten ausgerichtet.
• valign=„baseline“: Die Zellen innerhalb einer Zeile werden an einer Basislinie ausgerichtet, sodass die erste Textzeile aller Zellen auf gleicher Höhe beginnt.

Die Ausrichtungsarten von Zelleninhalten können miteinander kombiniert werden.

Öffne nochmals das Dokument „Steckbrief.html“.

• Setze die Tabellenbreite auf 20 %.
• Richte die gesamte Tabelle zentriert aus. Auch die Überschrift „Das bin ich…“ soll zentriert werden.
• Die Schriftgröße der Tabellenzeilen „Name“ und „Vorname“ ist auf 4 zu setzen.
• Ändere die Hintergrundfarbe im Tabellenkopf.
• Setze die Tabellenhöhe der ersten drei Zeilen auf 30 Pixel und die der folgenden auf 20.
• Formatiere die linke Spalte rechtsbündig.