SELFHTML/Quickbar  HTML  Tabellen

	Zelleninhalte ausrichten
	Ausrichtung horizontal  Ausrichtung vertikal  Dezimalzeichenausrichtung

Ausrichtung horizontal

Anzeigebeispiel: So sieht's aus

Kopfzellen (<th>) werden zentriert ausgerichtet, wenn Sie nichts anderes angeben, Datenzellen (<td>) linksbündig. Sie können die Zellen jedoch auch anders ausrichten.

Beispiel:

<table border>
    <tr>
      <th align=left>Kopfzelle: 1. Zeile, 1. Spalte</th>
      <th>Kopfzelle: 1. Zeile, 2. Spalte</th>
      <th align=right>Kopfzelle: 1. Zeile, 3. Spalte</th>
    </tr>
    <tr>
      <td>Datenzelle: 2. Zeile, 1. Spalte</td> 
      <td align=center>Datenzelle: 2. Zeile, 2. Spalte</td>
      <td align=right>Datenzelle: 2. Zeile, 3. Spalte</td>
    </tr>
</table>

Erläuterung:

Mit align=left können Sie eine Kopfzelle in ihrem einleitenden Tag links ausrichten, durch die Angabe align=right rechts. Datenzellen können Sie in ihrem einleitenden Tag mit align=center zentriert ausrichten und durch align=right rechts. Die Angaben align=center bei Kopfzellen und align=left bei Datenzellen sind natürlich auch erlaubt, bewirken aber lediglich die Voreinstellung und sind deshalb nicht nötig. (align = Ausrichtung, left = links, center = zentriert, right = rechts).

Ab HTML 4.0 ist auch die Angabe align=justify erlaubt. Dadurch erzwingen Sie einen Blocksatz innerhalb der Zelle. Ferner ist die Angabe align=char in Verbindung mit den Attributen char= und charoff= erlaubt. Solche Angaben sind in der Regel aber eher sinnvoll für ganze Spalten (siehe   Dezimalzeichenausrichtung)

Beachten Sie:

Um alle Zellen einer Zeile gleich auszurichten, können Sie die Angaben zur Ausrichtung auch im einleitenden Tag der Zeile <tr> notieren. So richten Sie beispielsweise mit <tr align=right> alle folgenden Zellen der Zeile rechts aus.

Ausrichtung vertikal

Anzeigebeispiel: So sieht's aus

Innerhalb einer Tabellenzeile bestimmt die Zelle mit dem meisten Inhalt die Höhe der Tabelle. Die Inhalte der übrigen Zellen in der gleichen Zeile werden mittig dazu ausgerichtet. Auch bei  erzwungenen Zeilenhöhen werden alle Zelleninhalte mittig ausgerichtet, wenn Sie nichts anderes angeben. Sie können Zelleninhalte aber auch oben- und untenbündig ausrichten.

Beispiel:

<table border>
    <tr>
      <th valign=top>Kopfzelle: 1. Zeile, 1. Spalte</th>
      <th>Kopfzelle: 1. Zeile, 2. Spalte</th>
      <th valign=bottom>Kopfzelle: 1. Zeile, 3. Spalte</th>
    </tr>
    <tr>
      <td valign=top>Datenzelle: 2. Zeile, 1. Spalte</td>
      <td>Datenzelle: 2. Zeile, 2. Spalte</td>
      <td valign=bottom>Datenzelle: 2. Zeile, 3. Spalte</td>
    </tr>
</table>

Erläuterung:

Mit valign=top können Sie eine Zelle in ihrem einleitenden Tag obenbündig ausrichten, durch die Angabe valign=bottom untenbündig. Auch die Angabe valign=middle ist möglich. Dies ist jedoch die Voreinstellung ist und deshalb nicht nötig (valign = vertical align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig).

Ab HTML 4.0 ist auch die Angabe valign=baseline erlaubt. Dann werden alle Zellen innerhalb einer Zeile, die diese Angaben erhalten, an einer gemeinsamen Basislinie ausgerichtet. Und zwar so, daß die erste Textzeile aller dieser Zellen immer auf gleicher Höhe beginnt.

Beachten Sie:

Um alle Zellen einer Zeile gleich auszurichten, können Sie die Angaben zur Ausrichtung auch im einleitenden Tag der Zeile <tr> notieren. So richten Sie beispielsweise mit <tr valign=top> alle folgenden Zellen der Zeile obenbündig aus.

Dezimalzeichenausrichtung

Anzeigebeispiel: So sieht's aus

Für Daten wie Kommazahlen mit unterschiedlich langen Angaben hinter dem Komma ist normale die Textausrichtung nicht so sehr geeignet. Solche Werte wirken optisch am besten, wenn sie an dem Dezimalzeichen ausgerichtet werden. Sinnvoll sind solche Angaben natürlich nur in Zellen, die einen entsprechenden Wert enthalten.

Weder Netscape noch der MS Internet Explorer interpretieren diese Angaben in ihren Produktversionen 4.x.

Beispiel:

<table border>
     <colgroup>
        <col width=120>
        <col width=50 align=char char=",">
     </colgroup>
    <tr>
      <th>Element</th>
      <th>Anteil in mg</th>
    </tr>
    <tr>
      <td>Natrium</td>
      <td>10,3</td>
    </tr>
    <tr>
      <td>Nitrat</td>
      <td>0,117</td>
    </tr>
    <tr>
      <td>Hydrogencarbonat</td>
      <td>330</td>
    </tr>
</table>

Erläuterung:

Da sich die Angabe zur Ausrichtung auf eine ganze Spalte bezieht, gehört sie sinnvollerweise in das <col>-Tag (siehe dazu  Spalten vordefinieren).

Mit align=char können Sie innerhalb eines <col>-Tags erzwingen, daß die Spalteninhalte an einem Dezimalzeichen ausgerichtet werden. Außerdem benötigen Sie noch das Attribut char= (char = character = Zeichen). Dahinter geben Sie - in Anführungszeichen - ein Zeichen an, das Sie als Dezimalzeichen verwenden. Alle Werte in der betreffenden Spalte, die dieses Zeichen enthalten, werden so ausgerichtet, daß das Dezimalzeichen immer an der gleichen Stelle steht. Im obigen Beispiel wird ein Komma als Dezimalzeichen definiert. In den Werten der betreffenden Spalte stehen dann Werte wie 10,3 oder 0,117.

Neben dem Attribut char= zur Bestimmung des Dezimalzeichens können Sie zusätzlich noch das Attribut charoff= angeben (charoff = character offset = Zeichenposition). Damit können Sie angeben, an welcher Position das Zeichen frühestens vorkommen kann.

weiter:	Zellen verbinden
zurück:	Höhe und Breite erzwingen

SELFHTML/Quickbar  HTML  Tabellen

© 1998  Stefan Münz, muenz@csi.com