|
JPAGE_CURRENT_OF_TOTAL
8. Tabellen
Mit HTML ist es selbstverständlich möglich, Tabellen zu erzeugen. Ob Tabellen nun als Designtechnisches Element eingesetzt werden, oder um Text übersichtlich aufzulisten, oder wie auch immer - es gibt verschiedene Einsatzmöglichkeiten für Tabellen.
8.1 Tabellen erstellen
Eine Tabelle zu erstellen ist relativ einfach.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<table>
<tr>
<th>Pro</th>
<th>Contra</th>
</tr>
<tr>
<td>Design</td>
<td>Ladezeiten</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Aktualität</td>
</tr>
</table>
</body>
</html>
Erläuterung:
Eine Tabelle wird immer mit dem <table>-Tag eingeleitet. Das Tag <tr> wird dabei für eine neue Zeile verwendet (tr = table row), <th> für die Tabellenüberschriften (th = table header), <td> für die einzelnen Tabellenzellen (td = table data), in denen der Inhalt stehen soll.
8.2 Tabellen-Elemente ausrichten
Natürlich lassen sich mit dem bekannten Attribut align="..." die Inhalte der Tabelle auch entsprechend ausrichten.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<table align="center">
<tr>
<th>Pro</th>
<th>Contra</th>
</tr>
<tr align="right">
<td>Design</td>
<td>Ladezeiten</td>
</tr>
<tr align="right">
<td>Inhalt</td>
<td>Aktualität</td>
</tr>
</table>
</body>
</html>
Erläuterung:
Mit diesem Beispiel würde die Tabelle mittig auf dem Bildschirm dargestellt werden. Die Inhalte der beiden Reihen würden in diesem Fall rechts ausgerichtet sein.
8.3 Hintergrundgrafik und Hintergrundfarbe
In Tabellen lassen sich auch Hintergrundgrafiken und -farben einrichten.
Beispiel:
<table bgcolor="grey">
<tr>
<th>Pro</th>
<th>Contra</th>
</tr>
<tr>
<td background="grafik.gif">Design</td>
<td background="grafik2.gif">Ladezeiten</td>
</tr>
<tr>
<td background="grafik.gif">Inhalt</td>
<td background="grafik2.gif">Aktualität</td>
</tr>
</table>
</body>
</html>
Erläuterung:
Mit dem Attribut bgcolor="..." lässt sich eine Hintergrundfarbe definieren. Ob Sie nun dabei die Hexadezimal-Form wählen, oder englische Begriffe verwenden, bleibt Ihnen überlassen. Das Attribut background="..." definiert eine Hintergrundgrafik.
8.4 Rahmenstärke
Standardmäßig werden Tabellen mit einem Rahmen angezeigt. Dieser Rahmen lässt sich entweder ganz abschalten, oder sogar verdicken - je nachdem, was Sie bevorzugen.
Beispiel:
<table border="1">
<tr>
<th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit normalem Rahmen</th>
</tr>
</table>
<table border="5">
<tr>
<th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit normalem Rahmen und breitem 3D-Effekt</th>
</tr>
</table>
<table border="1" cellspacing="7">
<tr>
<th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit breitem Rahmen</th>
</tr>
</table>
<table border="0">
<tr>
<th>Tabelle (bestehend aus einer Zeile und einer Zelle) ohne Rahmen</th>
</tr>
</table>
Erläuterung:
Wie Sie anhand der Beispiele sehen können, gibt es verschiedene Attribute, die verschiedenes bewirken. Das Attribut border="..." sorgt dafür, ob Tabellenrahmen angezeigt werden, oder nicht. Je höher der Wert bei diesem Attribut ist, desto stärker wirkt der 3D-Effekt des Rahmens. Wenn Sie stattdessen nur die Rahmendicke verändern möchten, müssen Sie das Attribut cellspacing="..." verwenden.
Auch die Kombination border="0" und cellspacing="..." ist möglich, um zwischen den einzelnen Tabellenzellen einen höheren Abstand zu erlangen, aber ohne dabei einen Rahmen anzuzeigen.
8.5 Abstand vom Zelleninhalt zum Zellenrand
Um den Abstand zwischen Zelleninhalt und Zellenrand zu verändern, müssen Sie das Attribut cellpadding="..." wählen. Je höher der Wert gewählt wird, desto höher ist auch der Abstand.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<table border="2" cellpadding="10">
<tr>
<th>Pro</th>
<th>Contra</th>
</tr>
<tr>
<td>Design</td>
<td>Ladezeiten</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Aktualität</td>
</tr>
</table>
</body>
</html>
8.6 Breite und Höhe von Tabellen definieren
Um Tabellen in Ihrer Breite und Höhe zu beschränken, können die Attribute width="..." oder height="..." verwendet werden. Als Angabe sind prozentuale Werte möglich, aber auch absolute Werke, die dann in Pixel angegeben werden.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<table border="2" cellpadding="2" width="500" align="center">
<tr>
<th width="80%">Pro</th>
<th width="20%">Contra</th>
</tr>
<tr>
<td>Design</td>
<td>Ladezeiten</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Aktualität</td>
</tr>
</table>
</body>
</html>
Erläuterung:
Mit diesem Beispiel wird eine 500 Pixel breite Tabelle erzeugt. Die Spalte "Pro" ist dabei 80% von diesen 500 Pixel breit, die Spalte "Contra" hingegen nur 20%.
|
