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