Webseiten Quick'n easy
<html><head><title>eine kleine Tabelle</title></head>
<body>
<table border="1">
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
</tr>
<tr>
<td>Reihe 2, Zelle 1</td>
<td>Reihe 2, Zelle 2</td>
</tr>
<tr>
<td>Reihe 3, Zelle 1</td>
<td>Reihe 3, Zelle 2</td>
</tr>
</table>
</body></html>
Zellen mit Übergröße
Manchmal möchte man in der einen Spalte oder Zeile mehrere Zellen
haben, in der Nachbarspalte (oder Zeile) weniger Zellen.
Dafür gibt es die Attribute colspan und rowspan. Diese werden im
<td colspan="2">, bzw. <td rowspan="2"> untergebracht und
zeigen mit ihrer Zahl (hier: 2) an,
wie viele Felder überspannt werden sollen. Beide Attibute
können zusammen in einem td-Tag verwendet werden: <td
colspan="2" rowspan="2">.
Die Reihenfolge, in der die Attribute
angegeben werden, ist grundsätzlich egal und frei wählbar.
Im Folgenden einige Beispiele.
Zellen nach rechts überspannen
Ein colspan über zwei Zellen, in unserer Übungstabelle
von oben. Wir überspannen in der mittelsten Zeile 2 Felder.
Hierzu geben wir im ersten Feld, welches betroffen ist an, dass
wir ein Feld möchten, welches 2 Felder überspannt und das in
waagerechter Richtung. Es wird also das Feld daneben mit
verwendet.
Alle Angaben für die mit verwendeten Felder entfallen. Unsere
Tabelle im Code unten wird also kleiner. Das fehlende Feld wird
nicht einmal mehr erwähnt.
Wer sich über das Attribut border="1" wundert: hiermit sagen
wir dem Webbrowser, dass er uns die Ränder der Tabelle mit
anzeigen soll. Gibt man nichts an, bekommt man bei aktuellen
Webbrowsern eine Tabelle ohne Ränder. Dies ist zwar hübsch
anzuschaun aber beim Entwickeln einer neuen Tabelle eher
hinderlich.
<html><head><title>eine kleine Tabelle</title></head>
<body>
<table border="1">
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
</tr>
<tr>
<td colspan="2">Reihe 2, Zelle 1</td>
</tr>
<tr>
<td>Reihe 3, Zelle 1</td>
<td>Reihe 3, Zelle 2</td>
</tr>
</table>
</body></html>
Zellen nach unten überspannen
Als nächstes drehen wir die Richtung um, nehmen uns aber die
gleiche Zelle als Startpunkt.
Wie wir sehen entfällt auch hier wieder die Tabellenzelle, die
nicht mehr benötigt wird, weil ihr Platz bereits von der anderen
Zelle mitbenutzt wird.
<html><head><title>eine kleine Tabelle</title></head>
<body>
<table border="1">
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
</tr>
<tr>
<td rowspan="2">Reihe 2, Zelle 1</td>
<td>Reihe 2, Zelle 2</td>
</tr>
<tr>
<td>Reihe 3, Zelle 2</td>
</tr>
</table>
</body></html>
Zellen unten und rechts gleichzeitig überspannen
Zum Schluß noch die dritte Variation: eine Erweiterung in alle
Richtungen. Wir wählen: je 2 Felder nach rechts und 2 Felder nach
unten.
Damit wir auch etwas davon haben, erweitern wir unsere Tabelle auf
3 Reihen mit je 3 Tabellenzellen.
<html><head><title>eine kleine Tabelle</title></head>
<body>
<table border="1">
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
<td>Reihe 1, Zelle 3</td>
</tr>
<tr>
<td>Reihe 2, Zelle 1</td>
<td colspan="2" rowspan="2">Reihe 2, Zelle 2</td>
</tr>
<tr>
<td>Reihe 3, Zelle 1</td>
</tr>
</table>
</body></html>
Jede Zelle: eine kleine Welt für sich.
Innerhalb einer jeden Zelle können Sie sich mit HTML austoben. Es
ist alles erlaubt was auch zwischen <body> und </body>
erlaubt ist.
Absätze, Zeilenumbrüche, Überschriften, Bilder, Verlinkungen auf
andere Seiten, sogar Tabellen sind völlig legal.
Auf diese Weise entstehen Webseiten mit mehreren Menus und
Seiteninhalten.
Wie man das ganze etwas umsortiert und farblich ansprechender
gestalten kann, betrachten wir im nächstens Unterkapitel und im
übernächsten Kapitel (CSS).
An dieser Stelle schauen wir uns eine noch kleine Tabelle an.
Ein Bild, etwas Text, ein Absatz, eine kleine Tabelle um ein
paar Daten besser anzuzeigen... nicht viel. Aber man sollte einen
Eindruck gewinnen, was alles in einer Tabellenzelle möglich ist.
<html><head><title>Meine kleine Seite</title></head>
<body>
<table border="1">
<tr>
<td colspan="2"> <h1>Meine kleine Seite</h1> </td>
</tr>
<tr>
<td>
<img src="testbild.gif" alt="logo">
</td>
<td>
Ich darf mich vorstellen:
<table>
<tr>
<td>Mein Name:</td>
<td>Sabine Muster</td>
</tr>
<tr>
<td>Mein Geburtstag:</td>
<td>31. Februar</td>
</tr>
<tr>
<td>Meine Lieblingsfarbe:</td>
<td>lilagrünblaßblau</td>
</tr>
</td>
</tr>
</table>
<p>
Was ich nicht aussetehen kann?<br>
Den Spruch: "Wenn man es nicht kann, soll man es sein lassen."<br>
Richtig sollte es heißen: "Wenn man es nicht kann, soll man es üben."
</p>
<div>© MeinName, 2004</div>
</body></html>
Seitenlayout mit Tabelle
<html><head><title>Meine Seite</title></head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td width="150"> <img src="testbild.gif"
alt="logo">
</td>
<td>
Menue:
<br>
<a href="news.html">Home</a>
| <a href="news.html">Kontakt</a>
| <a href="news.html">Neuigkeiten</a>
</td>
</tr>
<tr>
<td> Links:
<br><a href="http://www.whitehouse.gov/">Mein Haus</a>
<br><a href="http://www.bundespraesident.de/">Mein Job</a>
<br><a href="http://www.swm.de/">Mein Swimmingpool</a>
<br><a href="http://www.apple.de">Mein Computer</a>
<br><a href="">Meine Frau</a>
<br><a href="">Meine Kinder</a>
<br><a href="http://www.hawaii.com/">Unser letzter Urlaub</a>
</td>
<td>
<h3>Steckbrief</h3>
<table>
<tr>
<td>Vorname: </td>
<td>Max</td>
<td>Nachname: </td>
<td>Muster</td>
</tr>
<tr>
<td>Adresse: </td>
<td colspan="3">
Musterstrasse 8<br>
12345 Musterdorf a.d. Muster
</td>
</tr>
<tr>
<td>Tel: </td>
<td>+49 123 456 789 0</td>
<td>Fax: </td>
<td>+49 123 456 789 5</td>
</tr>
<tr>
<td>Handy: </td>
<td>0177 123 456 23</td>
<td>Email: </td>
<td>max.muster@example.com</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><div>© MeinName, 2004</div></td>
</tr>
</table>
</body></html>
Man sieht: innerhalb zweier <td> </td> kann man HTML
verwenden, als wäre man zwischen <body> und </body>.
Sogar Tabellen in Tabellen sind kein Problem (der Steckbrief ist
eine eigenständige Tabelle).
Einigen sind vielleicht kleine Erweiterungen aufgefallen. So hat
die äußere Tabelle die Attribute width="100%" und height="100%"
dazubekommen.
Dies besagt, dass der Webbrowser die Tabelle über 100% der
Browserfensters in die Breite (width) und 100% des
Browserfensters in die Höhe (height) aufspannen soll.
Auch im <td> Tag kann man width und height angeben, man
sollte aber immer mindestens eine Tabellenzelle zurückbehalten,
deren Größe der Browser selbst wählen kann. Als Werte sind
Prozentwerte zugelassen (dann muß man das %-Zeichen dahinter
schreiben) oder Pixelwerte. Dann steht nur eine Zahl dort, wie
in unserer ersten Tabellenzelle, die wir auf 150 Pixel in der
Breite festlegen.
Damit legen wir automatisch die Breite der gesamten Spalte fest.
Seitenlayout mit Tabelle und Stylesheet
Wir werden das Beispiel des letzten Unterkapitels jetzt etwas
aufpeppen. Dazu werden wir primär Stylesheets einsetzen.
Als erstes streichen wir aus den Tabellen die Angabe
border="1" .
Jetzt sorgen wir dafür, dass der Text in allen Tabellenzellen
am oberen Ende der Tabellenzelle beginnt:
td { vertical-align: top; }
Als nächstes schenken wir der Tabellenzelle, in der wir unsere
Links aufgelistet haben, ein class="gelb" und der oberen
Tabellenzelle ein class="blau".
Jetzt ist die Tabelle in der Mitte dran. Eine einfache
Farbänderung kann man problemlos auch schon im Tag <tr> mir
angeben, dann wird der Style auf jede Zelle der Reihe
angewendet. Wir können also die gleichen Angaben verwenden,
wie für die beiden Menues.
Jetzt ist noch die Copyright-Zeile dran.
Wer die beiden Bilder vergleicht, stellt fest, dass unsere
Copyright-Zeile jetzt dezent in die rechte Ecke verbannt wurde,
mit einem kleinen Textfont und in Schrägschrift (italic).
Die dafür nötigen Styleangabe nennen wir copy.
Zum Schluß greifen wir noch etwas in die Trickkiste:
Unsere oberste Zeile ist noch etwas groß (je nach Webbrowser
mehr oder weniger). Hier verwenden wir in den Style-Angaben
ein height und geben an, wie hoch unsere Zeile werden soll.
Dieser Styleangabe geben wir den Namen flach und verwenden Sie
als class="flach" im tr-Tag der ersten Tabellenzeile.
Damit unsere Links auch hübsch aufleuchten, wenn man mit der
Maus darüberstreicht, kann man Styleangaben für :hover machen.
(hier steht der Name bereits fest). In Kombination mit a:hover
betreffen diese Einstellungen nur die Verweise auf andere
Webseiten, also alles, was zwischen <a> und </a> steht.
Und so sieht das HTML-Dokment jetzt aus (wie die Werte für
die Farben entstehen, läßt sich im Kapitel 'Mehr CSS - Farbe,
Layout' nachlesen):
<html>
<head>
<title>Meine Seite</title>
<style>
td { vertical-align: top; }
.gelb { background-color: #ffffaa; }
.blau { background-color: #aaaaff; }
.grau { background-color: #dddddd; }
.flach { height: 40px;}
.copy
{
text-align: right;
font-size: 11px;
font-style: italic;
}
a:hover { color: #dddddd; background-color: #005500; }
</style>
</head>
<body>
<table width="100%" height="100%">
<tr class="flach">
<td width="150"> <img src="testbild.gif" alt="logo"> </td>
<td class="blau">
Menue:
<br>
<a href="news.html">Home</a>
| <a href="news.html">Kontakt</a>
| <a href="news.html">Neuigkeiten</a>
</td>
</tr>
<tr>
<td class="gelb"> Links:
<br><a href="http://www.whitehouse.gov/">Mein Haus</a>
<br><a href="http://www.bundespraesident.de/">Mein Job</a>
<br><a href="http://www.swm.de/">Mein Swimmingpool</a>
<br><a href="http://www.apple.de">Mein Computer</a>
<br><a href="">Meine Frau</a>
<br><a href="">Meine Kinder</a>
<br><a href="http://www.hawaii.com/">Unser letzter Urlaub</a>
</td>
<td>
<h3>Steckbrief</h3>
<table>
<tr class="grau">
<td>Vorname: </td>
<td>Max</td>
<td>Nachname: </td>
<td>Muster</td>
</tr>
<tr class="gelb">
<td>Adresse: </td>
<td colspan="3">
Musterstrasse 8<br>
12345 Musterdorf a.d. Muster
</td>
</tr>
<tr class="grau">
<td>Tel: </td>
<td>+49 123 456 789 0</td>
<td>Fax: </td>
<td>+49 123 456 789 5</td>
</tr>
<tr class="gelb">
<td>Handy: </td>
<td>0177 123 456 23</td>
<td>Email: </td>
<td>max.muster@example.com</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><div class="copy">© MeinName, 2004</div></td>
</tr>
</table>
</body></html>
Breiten und Abstände in Tabellen
Wer viel mit Farben arbeitet, wird bald feststellen, dass in den
Tabellen selbst bei der Anzeige noch Abstände vorhanden sind.
Hierbei handelt es sich um zwei Typen:
1. Den Abstand der Tabellenzellen zueinander (cellspacing).
2. Den Abstand vom Zellenrand zum Inhalt der Zelle (cellpadding).
Im Folgenden variieren wir eine kleine Tabelle etwas um zu sehen,
wie sich cellpadding und cellspacing auswirken.
Zu Beginn erst einmal ohne weitere Angaben. Lediglich ein wenig
Farbe (damit wir sehen wo sich etwas ändert) und border="1".
<html><head>
<title>Abstände in Tabellen</title>
<style>
.blau { background-color: blue; color: white; }
.gelb { background-color: yellow; color: purple; }
</style>
</head><body>
<table border="1">
<tr class="blau">
<td> Zeile 1 Zelle 1</td>
<td> Zeile 1 Zelle 2</td>
</tr>
<tr class="gelb">
<td>Zeile 2 Zelle 1</td>
<td>Zeile 2 Zelle 2</td>
</tr>
</table>
</body></html>
Als nächstes ändern wir unser cellpadding und setzen es auf einen
hübsch großen Wert (damit wir auch was davon haben). Die Zahl die
wir im cellpadding angegeben haben (und auch die im cellspacing)
teilt dem Webbrowser mit wie viele Pixel er Platz lassen soll.
<table cellpadding="20" border="1">
<tr class="blau">
<td> Zeile 1 Zelle 1</td>
<td> Zeile 1 Zelle 2</td>
</tr>
<tr class="gelb">
<td>Zeile 2 Zelle 1</td>
<td>Zeile 2 Zelle 2</td>
</tr>
</table>
Und jetzt auch mal den anderen Wert betrachten: cellspacing.
Übrigens: man kann auch beide Attribute gleichzeitig verwenden und
auf unterschiedliche Werte setzen.
<table cellspacing="20" border="1">
<tr class="blau">
<td> Zeile 1 Zelle 1</td>
<td> Zeile 1 Zelle 2</td>
</tr>
<tr class="gelb">
<td>Zeile 2 Zelle 1</td>
<td>Zeile 2 Zelle 2</td>
</tr>
</table>
Als letztes Beispiel setzen wir beide Attribute auf den Wert 0.
Dies ist sehr beliebt, da damit die Tabellenzellen nahtlos
aneinanderstoßen und Hintergrundfarben oder Bilder nicht weiter
unterbrochen werden.
<table cellpadding="0" cellspacing="0" border="1">
<tr class="blau">
<td> Zeile 1 Zelle 1</td>
<td> Zeile 1 Zelle 2</td>
</tr>
<tr class="gelb">
<td>Zeile 2 Zelle 1</td>
<td>Zeile 2 Zelle 2</td>
</tr>
</table>
W3C - Tabellen im HTML-Standard
Komplette Beschreibung aller Tags, die es für Tabellen gibt
Tabellen im HTML-Standard
Deutsche Übersetzung zum Standardtext des W3C
Viele bunte Klötzchen
Mal eine andere Homepage. Versuchen Sie sich doch einmal an
dieser Skizze!
Hier eine Lösungshilfe: Wir verwenden eine Tabelle mit 6
Zeilen und 6 Spalten.
Die Farbe verteilen wir großzügig per Style-Angabe im Head-Bereich
des Dokumentes.
Um den Spass nicht zu verderben, gibt es den Lösungsvorschlag nur als
separates File... auf den Webseiten.
Bitte nicht zu vergessen: Dies ist nur ein
Vorschlag, es gibt sicher noch mehr Wege eine Tabelle so
hinzubekommen, dass sie aussieht, wie auf dem Bild.
Mosaikbild
Gerade bei großen Bildern dauert das Laden oft sehr lange und ist
für den Benutzer anstrengend. Dies kann man zwar nicht wirklich
beschleunigen, aber spannender gestalten, indem man das große Bild
in viele kleine Bilder zerlegt und per Tabelle wieder
zusammensetzt.
Auch als Kopierschutz wird diese Technik gerne eingesetzt. Ziel
hierbei ist es, die Erstellung einer Kopie des kompletten Bildes
möglichst schwer zu machen (verhindern kann man das nicht).
Vorsicht! Ältere Webbrowser laden erst die
komplette Tabelle mit ihrem Inhalt und stellen sie danach komplett
dar. Dies ist nicht im Sinne der Idee. Moderne Webbrowser halten
es hier etwas anders, z.B. Firefox (Windows/Linux/MacOSX) oder
Safari (MacOSX).
Weiterhin kann man dem Webbrowser helfen, indem man in den Bildern
die richtige Bildgröße per width und height angibt.
Auf Ihrer CD findet sich im Verzeichnis Kurs1_Uebungen eine Sammlung von
Bildern.
Kopieren Sie sich diese Bilder in Ihr Arbeitsvezeichnis.
Setzen Sie die Bilder in Ihrer HTML-Seite zu einem Gesammtbild
zusammen.
Es gibt bei dieser Übung zwei Lösungsansätze. Einen ganz
einfachen, der aber einige Tücken birgt und einen aufwändigeren,
der dafür sicherer ist.
Die schnelle und einfache Lösung verzichtet auf Tabellen und
Schnickschnack.
Die Bilder werden nebeneinander angeordnet und in der Mitte gibt
es einen Zeilenumbruch.
Genial einfach und ohne großen Aufwand. Der einzige Nachteil:
Machen Sie Ihr Webbrowserfenster mal ganz schmal! Genauso. Jetzt
werden plötzlich alle 4 Teilbilder untereinander angezeigt und
alles ist dahin...
<html><head><title>Mosaik</title></head>
<body>
<img src="teil1.png"><img src="teil2.png"><br>
<img src="teil3.png"><img src="teil4.png">
</body></html>
Noch ein kleiner Trick: die einzelnen Bilder schließen nur dann
nahtlos aneinander, wenn die img-Tags, die dem Browser
sagen, dass er jetzt an dieser Stelle ein Bild anzeigen soll, auch
genau aneinander schließen. Zeilenumbrüche und Leerzeichen
zerstören den randlosen Bildaufbau an dieser Stelle.
Die zweite Möglichkeit baut eine Tabelle auf, bei der alle Ränder
und Abstände auf 0 Pixel Breite gesetzt werden.
<html><head><title>Mosaik</title></head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="teil1.png"></td>
<td><img src="teil2.png"></td>
</tr>
<tr><td><img src="teil3.png"></td>
<td><img src="teil4.png"></td>
</tr>
</table>
</body></html>
Der Vorteil dieser Variante ist, dass das Bild erhalten bleibt,
egal wie schmal der Benutzer sein Browserfenster macht. Im Notfall
bekommt er einen Scrollbalken.