Ausrichtung des Tabelleninhalts mit HTML
Sie können Ihre Tabellen noch verbessern, indem Sie die Ausrichtung des Tabellen- und Zelleninhalts genauer präzisieren. Das align-Attribut richtet den Inhalt horizontal, das valign-Attribut richtet den Inhalt vertikal aus. Beide Attribute wurden in HTML 3.2 eingeführt, aber in HTML 4.0 verworfen; in den folgenden Abschnitten wird erklärt, wie diese Attribute für die Tabellenerstellung verwendet werden.
Tabellenausrichtung
Standardmäßig werden Tabellen zum linken Seitenrand hin ausgerichtet, wobei der übrige Text über oder unter der Tabelle dargestellt wird. Mit dem align-Attribut können Sie Tabellen zum linken bzw. rechten Seitenrand hin ausrichten und Text um diese herumfließen lassen, wie Sie das schon bei Abbildungen getan haben. align=left richtet die Tabelle zum linken Seitenrand hin aus, und der der Tabelle folgende Text wird in den Freiraum zwischen der Tabelle und dem rechten Seitenrand gepackt. align=right tut das gleiche, wobei die Tabelle zum rechten Seitenrand hin ausgerichtet wird.
Im Beispiel, das in Abbildung gezeigt wird, wird eine Tabelle, die 70% der Seite einnimmt, mit folgendem Code nach links ausgerichtet:
<table border="1" align="left" width="70%">
Wenn Sie das Herumfließen des Textes unterbrechen möchten, können Sie das so wie bei Abbildungen tun, indem Sie die Zeilenumbruch-Kennung (<br />) mit dem clear-Attribut einsetzen.
Das Zentrieren von Tabellen ist etwas schwieriger. Sie können jedoch die <center>- oder <div align=center>-Kennungen verwenden, um Tabellen auf der Seite zu zentrieren. Mit den älteren Versionen der Browser wird <table align=center> korrekt unterstützt. Wie andere Formatierungs-Attribute wurde das align-Attribut in HTML 4.0 verworfen.
Zellenausrichtung
Wenn Sie die Zeilen und Zellen an Ort und Stelle und die Tabelle auch richtig auf der Seite ausgerichtet haben, richten Sie die Daten innerhalb der Zellen so aus, wie es dem Tabelleninhalt am besten entspricht. HTML-Tabellen bieten mehrere Optionen für die Ausrichtung von Zellen, sowohl horizontal als auch vertikal. Abbildung zeigt eine Tabelle (eine echte HTML-Tabelle!) mit den verschiedenen Möglichkeiten der Ausrichtung.
Die horizontale Ausrichtung (das Attribut align) definiert, ob die Daten innerhalb einer Zelle linksbündig (left), rechtsbündig (right) oder zentriert (center) dargestellt werden.
Die vertikale Ausrichtung (das Attribut valign) definiert die vertikale Datenausrichtung innerhalb der Zellen, das heißt ob die Daten oben in der Zelle (top), unten (bottom) oder vertikal zentriert (middle) angeordnet sind. Die Browser haben anfangs implementiert auch valign=baseline, welches so ähnlich wie valign=top ist, außer dass es die Grundlinie der ersten Textzeile ausrichtet (abhängig vom Zelleninhalt kann das möglicherweise ein anderes Ergebnis als align=top bringen).
Standardmäßig werden die Überschriftszellen sowohl horizontal als auch vertikal ausgerichtet, und die Datenzellen werden vertikal zentriert aber linksbündig angezeigt.
Sie können die Standardwerte für jeweils eine ganze Zeile durch die Angabe der Attribute align oder valign im Tag <tr> überschreiben, wie etwa im folgenden Beispiel:
<tr align="center" valign="top">
Die Zeilenausrichtung einzelner Zellen überschreiben Sie durch die Angabe von
align in den Tags <td> oder <th>:
<tr align="center" valign="top">
<td>14</td>
<td>16</td>
<td align=left>No Data</td>
<td>15</td>
</tr>
Das folgende Beispiel zeigt die verschiedenen Zellenausrichtungen und ihre Darstellung im Safari (Abbildung).
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th width="25%"><br />
</th>
<th width="25%">Left</th>
<th width="25%">Centered</th>
<th width="25%">Right</th>
</tr>
<tr>
<th>Top</th>
<td align="left" valign="top"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="center" valign="top"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="right" valign="top"><img src="warning_32.png" alt="button" width="32" height="32"></td>
</tr>
<tr>
<th>Centered</th>
<td align="left" valign="middle"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="center" valign="middle"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="right" valign="middle"><img src="warning_32.png" alt="button" width="32" height="32"></td>
</tr>
<tr>
<th>Bottom</th>
<td align="left" valign="bottom"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="center" valign="bottom"><img src="warning_32.png" alt="button" width="32" height="32"></td>
<td align="right" valign="bottom"><img src="warning_32.png" alt="button" width="32" height="32"></td>
</tr>
</table>
</body>
</html>
Überschriftenausrichtung
Das align-Attribut zur Überschrift- es handelt sich um eine Option - legt die Ausrichtung der Überschrift fest. Je nach Browser kann align verschiedene Bedeutungen haben.
In den meisten Browsern nimmt align einen von zwei Werten an: top (oben) oder bottom (unten). Dies stellt die korrekte Verwendung des align-Attributs dar. Standardmäßig wird die Überschrift oben angezeigt (align=top). Sie können das Attribut align=bottom auf die Überschrift anwenden, wenn Sie sie unten darstellen wollen, etwa folgendermaßen:
<table>
<caption align=bottom>HTML Lernen - Grundlagen und Tutorials</caption>
Beim früheren Versionen der Browser sind die Tabellenüberschriften jedoch anders. Dort benutzen Sie das Attribut valign, um die Überschrift nach oben oder unten auszurichten, und ALIGN hat drei verschiedene Werte: left, right und center, mit denen die Überschrift horizontal ausgerichtet wird.
Um ähnliche Ergebnisse wo es nicht funktioniert zu erzielen, verwenden Sie align=bottom oder align=top und anschließend das <div>-Tag mit dessen align-Attribut, um den Text der Überschrift linksbündig, rechtsbündig oder zentriert auszurichten. Dies funktioniert im meisten früheren Versionen der Browser.
Wenn Sie zum Beispiel eine Überschrift am unteren Rand einer Tabelle platzieren wollen, die rechtsbündig ausgerichtet ist, können Sie folgenden Code verwenden:
<caption valign="bottom" align="right">HTML Lernen - Grundlagen und Tutorials</caption>
oder Sie verwenden das <div>-Tag, das auch funktioniert:
<caption align="bottom"><div align="right">HTML Lernen - Grundlagen und Tutorials</div></caption>
Wenn Sie nicht gerade eine sehr kurze Tabelle erzeugen, dann sollten Sie Ihre Überschrift in der Standardposition lassen - zentriert, am oberen Tabellenrand - sodass Ihre Leser sie zuerst sehen und wissen, worum es geht. Warten Sie also nicht, bis die Leser die gesamte Tabelle schon durchgesehen haben (obwohl sie dann meist ohnehin schon wissen, um was es geht).