Tabelle ausrichten
Normalerweise ist eine Tabelle immer links ausgerichtet. Wenn die Tabelle schmaler als das Fenster
ist, bleibt der Platz neben ihr frei. In diesem Kapitel lernst du, wie du die Tabelle links oder rechts
platzieren kannst und wie du den Text die Tabelle umfließen lassen kannst.
Mit align="left"
im <table>Tag erreichst du, dass die Tabelle links steht und der folgende Text die Tabelle rechts
umfließt.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht normaler Text.
<table border width="50%" align="left">
<tr>
<td>Tabelle</td>
</tr>
</table>
Hier steht normaler Text. Hier steht normaler Text. Hier steht normaler Text.
</body>
</html>
|
|
|
Mit align="right"
im <table>Tag erreichst du, dass die Tabelle rechts steht und der folgende Text die Tabelle links
umfließt.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht normaler Text.
<table border width="50%" align="right">
<tr>
<td>Tabelle</td>
</tr>
</table>
Hier steht normaler Text. Hier steht normaler Text. Hier steht normaler Text.
</body>
</html>
|
|
|
Mit align="center"
im <table>Tag erreichst du, dass die Tabelle in der Mitte steht und der
folgende Text die Tabelle nicht umfließt.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht normaler Text.
<table border width="50%" align="center">
<tr>
<td>Tabelle</td>
</tr>
</table>
Hier steht normaler Text. Hier steht normaler Text. Hier steht normaler Text.
</body>
</html>
|
|
|
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht normaler Text.
<table border width="50%" align="left">
<tr>
<td> Tabelle mit etwas mehr Inhalt. Wenn hier nur das Wort
"Tabelle" stehen würde, wäre der Text nach <br clear=all>
sowieso unter der Tabelle.</td>
</tr>
</table>
Dieser Text steht neben der Tabelle.<br>Dieser
auch.
<br clear="all">Dieser Text steht unter der Tabelle.
</body>
</html>
|
|
|
Wenn nur ein Teil des folgenden Textes die Tabelle umfließen soll, kannst du einen besondern
Zeilenumbruch einfügen. Mit <br
clear="all"> erreichst du, dass der folgende Text erst unter der
Tabelle steht. Der gleiche Zeilenumbruch funktioniert auch bei Texten die z.B. erst unter einem
Bild fortgesetzt werden sollen.
Wenn eine Tabelle von Text umflossen wird "klebt" der umfließende Text normalerweise
direkt an der Tabelle (siehe oben). Es gibt zwar ein Attribut (hspace= bzw. vspace=) mit dem man einen
äußeren Abstand festlegen kann, aber das gehört nicht zum HTML-Standard und wird nur von Netscape ab
Version 3 interpretiert. Deshalb ist es sinnvoller einen kleinen Trick anzuwenden. Man setzt die Tabelle
in eine sogenannte blinde Tabelle. Das ist eine Tabelle ohne Rahmen. Man sieht von ihr praktisch nichts.
Die Tabellengröße, bezogen auf die Fenstergröße, und die Ausrichtung der Tabelle muß natürlich in der
äußeren Tabelle festgelegt werden. Der Abstand wird mit den
bereits erlernten Mitteln bestimmt. Die innere Tabelle muß mit 100% Breite angegeben werden, wenn
für die äußere Tabelle eine Breite definiert wurde, damit sie auch wirklich den gesamten für sie
bestimmten Platz ausfüllt. Sie hat schließlich den Rahmen. Für die Höhe gilt natürlich das gleiche.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht normaler Text.
<table width="50%" align="left" cellpadding="10" border="0">
<tr>
<td>
<table border width="100%">
<tr>
<td>Tabelle</td>
</tr>
</table>
</td>
</tr>
</table>
Hier steht normaler Text. Hier steht normaler Text. Hier steht normaler Text.
</body>
</html>
|
|
|
Weiter geht's mit dem Kapitel Tabellenüberschrift.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: