| Internetname |
Reservieren Sie Ihren eigenen
Internetnamen. Meiner jüngsten
Tochter gehört zum Beispiel der
Name lea-becker.de.
Der eigene Internetname kann ein schönes Geschenk von
bleibendem Wert für die Kinder und
Enkelkinder sein.
|
| Referenzen |
Besuchen Sie Seiten unserer
Internetkunden.
|
| Auszeichnungen |
Klappern gehört zum Handwerk.
|
| Impressum |
Hier finden Sie unsere Kontaktdaten sowie etwas zum Lesen für die Juristen.
|
|
|
 |
HTML - Schritt für Schritt |
|
| |
Tabellen sind eines der wichtigsten Gestaltungsmittel für Webseiten.
Texte und Bilder können fast beliebig auf der Seite angeordnet werden. Ohne
Tabellen wäre dies nicht machbar.
Wichtig ist, dass Tabellen nicht zu lang werden. Die bekannten Browser zeigen
Tabellen erst an, wenn die Tabelleninhalte über die Leitung eingetroffen sind. Bei Texten ist das nicht weiter
schlimm. Aber bei Bildern die ohne Größenangaben eingefügt wurden.
Der arme Surfer wartet und wartet und ... nein, noch länger wartet er nicht.
Er verläßt die Seite.
|
|
|
Seitengestaltung mit Tabellen |
|
| |
Es hat einen Grund, warum die so wichtigen Tabellen erst jetzt behandelt werden. Es ist ein sehr
komplexes Thema. Mit dem Einsatz von Tabellen erschließen sich sehr viele
Gestaltungsmöglichkeiten. Der Preis dafür: Sie müssen diese Möglichkeiten
kennen und nutzen können.
Nur zur Erinnerung, der Grundaufbau jeder HTML-Seite sieht wie folgt aus:
<html>
<head>
<title>Ein aussagefähiger Seitentitel</title>
</head>
<body>
</body>
</html>
Die HTML-Tags mit den Seiteninhalten werden zwischen den beiden body-Tags eingefügt.
|
|
|
Die Grundstruktur einer Tabelle |
|
| |
Schon die kleinstmögliche Tabelle benutzt mindestens drei verschiedene Tags. Zunächst wird
das Tagpaar zur Kennzeichnung von Anfang und Ende einer Tabelle benötigt:
<table>
</table>
Dieses Tagpaar kennzeichnet lediglich Anfang und Ende der Tabelle. Sichtbar ist jetzt noch gar nichts.
Denn jede Tabelle benötigt mindestens eine Tabellenzeile (table row). Es wird also das Tagpaar
zur Kennzeichnung von Anfang und Ende der Tabellenzeile eingefügt:
<table>
<tr>
</tr>
</table>
Eine Tabllenzeile ist nun zwar vorhanden, zu sehen ist aber immer noch nichts. In der Tabellenzeile
muß mindestens eine Zelle (Spalte) für die Aufnahme von Tabellendaten (table data)
eingefügt werden:
<table>
<tr>
<td>
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
</td>
</tr>
</table>
Und so sieht es dann im Browser aus:
|
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
|
Damit ganz deutlich wird, dass es sich tatsächlich um eine Tabelle handelt, wird nun das
erste Attribut von vielen die noch folgen werden hinzugefügt - ein Rahmen (border).
<table border="4">
<tr>
<td>
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
</td>
</tr>
</table>
|
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
|
Unter einer Tabelle stellt man sich jedoch meistens etwas anderes vor. Die gewohnten Tabellen,
beispielsweise Tabellen einer Tabellenkalkulation, haben mehr als eine Zeile und eine Zelle.
Hier nun eine Tabelle mit zwei Zeilen die jeweils drei Zellen enthalten:
<table border="4">
<tr>
<td>1. Zeile, 1. Zelle</td>
<td>1. Zeile, 2. Zelle</td>
<td>1. Zeile, 3. Zelle</td>
</tr>
<tr>
<td>2. Zeile, 4. Zelle</td>
<td>2. Zeile, 5. Zelle</td>
<td>2. Zeile, 6. Zelle</td>
</tr>
</table>
| 1. Zeile, 1. Zelle |
1. Zeile, 2. Zelle |
1. Zeile, 3. Zelle |
| 2. Zeile, 4. Zelle |
2. Zeile, 5. Zelle |
2. Zeile, 6. Zelle |
|
|
|
Abmessungen der Tabelle |
|
| |
Im vorherigen Beispiel waren Tabelle und Tabellenzellen gerade einmal groß genug, um die Tabellendaten
aufzunehmen. Die Größe kann jedoch mit Attributen gesteuert werden.
<table border="4" width="100%">
<tr>
<td>
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
</td>
</tr>
</table>
|
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
|
Im Beispiel nimmt die Tabelle die gesamte zur Verfügung stehende Breite (100%) ein. Das folgende
Beispiel zeigt eine Tabelle, die nur 25% der zur Verfügung stehenden Breite einnehmen soll.
<table border="4" width="25%">
<tr>
<td>
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
</td>
</tr>
</table>
|
Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
|
Enthält eine Tabelle mehrere Zellen, kann die Breite der einzelnen Spalten in der gleichen Weise
beeinflußt werden.
<table border="4" width="100%">
<tr>
<td width="50%">1. Zeile, 1. Zelle</td>
<td>1. Zeile, 2. Zelle</td>
<td>1. Zeile, 3. Zelle</td>
</tr>
<tr>
<td>2. Zeile, 4. Zelle</td>
<td>2. Zeile, 5. Zelle</td>
<td>2. Zeile, 6. Zelle</td>
</tr>
</table>
| 1. Zeile, 1. Zelle |
1. Zeile, 2. Zelle |
1. Zeile, 3. Zelle |
| 2. Zeile, 4. Zelle |
2. Zeile, 5. Zelle |
2. Zeile, 6. Zelle |
Auch die Höhe einer Zelle kann eingestellt werden. Genauso wie von der Breitenangabe die
gesamte Spalte betroffen war, ist von der Höhenangabe die gesamte Zeile betroffen.
<table border="4" width="100%">
<tr>
<td width="50%">1. Zeile, 1. Zelle</td>
<td>1. Zeile, 2. Zelle</td>
<td>1. Zeile, 3. Zelle</td>
</tr>
<tr>
<td height="100">2. Zeile, 4. Zelle</td>
<td>2. Zeile, 5. Zelle</td>
<td>2. Zeile, 6. Zelle</td>
</tr>
</table>
| 1. Zeile, 1. Zelle |
1. Zeile, 2. Zelle |
1. Zeile, 3. Zelle |
| 2. Zeile, 4. Zelle |
2. Zeile, 5. Zelle |
2. Zeile, 6. Zelle |
Breitenangaben können relativ (%) oder absolut angegeben werden. Der Wert 100% bedeutet 100% der
zur Verfügung stehenden Breite, der Wert 100 ohne Zusatz bedeutet 100 Pixel.
Höhenangaben können nur absolut angegeben werden. Möglich ist nur die Eingabe einer Zahl
ohne Zusatz.
|
|
|
Ausrichtung der Tabellendaten |
|
| |
Auf Zellebene kann angegeben werden, wo die Inhalte der Zelle angezeigt werden sollen: links,
rechts, zentriert, oben, unten.
<table border="1" width="100%">
<tr>
<td width="33%" height="100" align="center" valign="bottom">1. Zeile, 1. Zelle</td>
<td width="33%">1. Zeile, 2. Zelle</td>
<td>1. Zeile, 3. Zelle</td>
</tr>
<tr>
<td height="100" align="left" valign="top">2. Zeile, 4. Zelle</td>
<td>2. Zeile, 5. Zelle</td>
<td align="center" valign="top">2. Zeile, 6. Zelle</td>
</tr>
</table>
| 1. Zeile, 1. Zelle |
1. Zeile, 2. Zelle |
1. Zeile, 3. Zelle |
| 2. Zeile, 4. Zelle |
2. Zeile, 5. Zelle |
2. Zeile, 6. Zelle |
|
|
|
|
