Tabelleninhalte ausrichten

Waagerechte Ausrichtung

Wie schon erwähnt werden Kopfzellen standardmäßig zentriert ausgerichtet und normale Zellen linksbündig. Aber man kann natürlich auch eine andere Ausrichtung erzwingen.

Wenn du ins <th>- bzw. <td>Tag align="left" einfügst, wird der Zellinhalt links ausgerichtet (align: engl. - ausrichten; left: engl. - links). Bei einer normalen Zelle bewirkt dieses Attribut nur, dass das Dokument mehr Speicherplatz belegt und dadurch mehr Ladezeit braucht, weil normale Zelle auch ohne diese Angabe links ausgerichtet werden. Wenn du center (engl. - Mitte, zentrieren) statt left angibst, wird der Zellinhalt mittig ausgerichtet. Da Kopfzellen sowieso mittig ausgerichtet sind, sollte auch hier die Angabe weg gelassen werden. right (engl. - rechts) sorgt dafür, dass der Zellinhalt rechts ausgerichtet wird.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="300">
<tr>
<th align="left">Kopfzelle 1</th>
<th align="right">Kopfzelle 2</th>
</tr>
<tr>
<td align="left">Zelle 1.1</td>
<td align="right">Zelle 1.2</td>
</tr>
<tr>
<td align="center">Zelle 2.1</td>
<td> Zelle 2.2 </td>
</tr>
</table>
</body>
</html>

Senkrechte Ausrichtung

Wenn keine Zellhöhe angegeben ist bestimmt die Zelle einer Zeile mit dem höchsten Inhalt die Höhe der Zellenreihe. Normalerweise wird der Zellinhalt der anderen Zellen, dei denen Platz übrig ist, mittig ausgerichtet.

Wenn du ins <th>- bzw. <td>Tag valign="top" (valign steht für vertical align. vertical: engl. - senkrecht, vertikal; top: engl. - oben) einfügst, wird der Zellinhalt oben ausgerichtet. valign="bottom" (bottom: engl. - unten) sorgt dafür, dass der Zellinhalt unten ausgerichtet wird. Es ist auch valign="middle" (middle: engl. - Mitte) möglich. Da dies aber der Standardeinstellung entspricht kann es entfallen.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border>
<tr>
<td height=50 valign=top>Zelle 1.1</td>
<td valign=bottom>Zelle 1.2</td>
</tr>
<tr>
<td height=50 valign="middle">Zelle 2.1</td>
<td> Zelle 2.2 </td>
</tr>
</table>
</body>
</html>

Wenn alle Zellinhalte einer Zellenreihe gleich ausgerichtet werden sollen kann dieses Attribut auch im <tr>Tag stehen.

Weiter geht's mit dem Kapitel Tabelle ausrichten.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: