|
|
|
|
Tabellen, oder alles verschachtelt.
Kennt ihr Tabellen? Also eigentlich sind dieses viereckige Kästen in denen man lauter
Zahlen und Texte hineinschreiben kann, aber es gibt auch andere Verwendungsmöglichkeiten.
|
|
Tabellen sind etwas, das Unki unheimlich gerne verwendet, manche behaupten sogar, er sei tabellenverrückt. Aber wer weiß vielleicht gelingt es mir sogar euch mit der Vorliebe für Tabellen anzustecken. Mal sehen, ob ich da irgendwo ein Beispiel für euch habe. Den Aufbau eines HTML-Dokumentes kennt ihr ja schon, aber nun setze ich in den Textteil mal eine Tabelle ein.
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
<p>
<table border="1">
<tr>
<td>1. Zeile 1. Spalte</td>
<td>1. Zeile 2. Spalte</td>
</tr>
<tr>
<td>2. Zeile 1. Spalte</td>
<td>2. Zeile 2. Spalte</td>
</tr>
</table>
</p>
</body>
</html>
|
Wenn ihr das auf eurer Seite eingegeben habt, kann ich euch eine Tabelle zeigen, die dann wie folgende ausschaut:
| 1. Zeile 1. Spalte |
1. Zeile 2. Spalte |
| 2. Zeile 1. Spalte |
2. Zeile 2. Spalte |
Ihr seht, mit <tr> beginnt ihr eine Zeile in der mit <td> dann Spalten gesetzt werden. Diese Spalten schließt ihr mit </td> und wechselt zur nächsten Zeile indem ihr eure Zeile mit </tr> beendet.
Soweit habt ihr nun schon einmal eine einfache Tabelle gezeichnet. Bemerkt ihr eigentlich den Rand der Tabelle? Dieser kommt durch border="1". Erinnerst ihr euch, wo ihr das schon einmal gelesen habt? Richtig, das kam bei den Bildern vor. So Tabellen haben nämlich auch die Möglichkeiten wie Bilder und können sogar eingefärbt werden.
ihr könnt den einzelnen Tabellenspalten eine eigene Größe zuweisen und sogar den Text darin etwas ausrichten. In den <td>Spaltenbereich</td> könnt ihr alles, was in HTML möglich ist verwenden. :o) Bei der Ausrichtung gibt es jedoch auch eine besondere Möglichkeit. ihr könnt nicht nur mit align arbeiten sondern auch mit valign. Mit Valign könnt ihr sagen, ob der Text in einer Zelle oben, in der Mitte oder auch am unteren Rand stehen soll... Hey ich habe eine Idee ich zeige es euch mal wieder an einem Beispiel.
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
<p>
<table border="1">
<tr>
<td align="center" valign="center">Nummer 1</td>
<td height="50" width="50" bgcolor="red"><br></td>
</tr>
<tr>
<td align="left" height="50" width="200">Hallo</td>
<td align="right" height="50" width="50">???</td>
</tr>
</table>
</p>
</body>
</html>
|
Diese Tabelle sieht dann so aus:
Schaut euch mal diese Tabelle ganz genau an... 8-) ihr seht Nummer 1 steht ganz in der Mitte und obwohl wir beide ihr keine Größenangabe gegeben haben ist sie auch in einer großen Tabellenzelle. Dieses liegt daran, dass wir der Tabelle unterhalb von Nummer 1 eine genaue Breite gegeben haben. Bei einer Tabelle sind alle untereinander liegenden Zellen gleich groß. Jedoch könnt ihr in einer Tabellenzelle auch eine neue Tabelle öffnen. Okay, aber noch etwas fällt bei Nummer 1 auf, durch valign und align steht sie auch noch in der Mitte (zentriert).
Lasst uns jetzt mal die zweite Spalte anschauen. Da ist einfach nur ein roter Kasten. Oben im HTML-Dokument haben wir dieser Zelle die Farbe red gegeben und als Inhalt der Tabelle ein <br> gegeben. Dieses <br> ist einfach nur ein Zeilenwechsel, entspricht etwa einem Enter. Ihr bekommt es nicht angezeigt, aber mir ist dadurch klar, dass ich diese Tabellenzelle auch darstellen soll.
Gehen wir jetzt einmal in die zweite Zeile zum Hallo und den ???. Ihr seht einmal, dass bei Hallo die Tabellenspalte (Zelle) mit einer Höhe von 50 und einer Breite von 200 angegeben ist. Darüberhinaus ist durch align=left noch gesagt, dass die Schrift links beginnen soll. Bei den ??? wird die Schrift durch align=right rechts begonnen.
So nun könnt ihr also schon farbige Tabellen mit ausgerichtetem Text zeichen. Aber nun verrate ich euch mal ein Geheimnis von Unki. Er mag Tabellen deswegen so furchtbar gerne, da man auch den Tabellenrand ausblenden kann. Wenn ihr border="0" setzt könnt ihr durch die Tabelle ganz tolle Effekte erzielen.
Hey das bringt mich auf eine Idee. Wir machen mir mal einen bunten Rahmen. Einverstanden? Naja ich nehme mal schnell ein passendes HTML-Dokument und zeige euch was ich vorhabe.
<table border="0">
<tr>
<td bgcolor="red" height="50" width="50"><br></td>
<td bgcolor="yellow" height="50" width="220"><br></td>
<td bgcolor="red" height="50" width="50"><br></td>
</tr>
<tr>
<td bgcolor="blue" height="220" width="50"><br></td>
<td height="220" width="220"><img src="htmling.gif"></td>
<td bgcolor="blue" height="220" width="50"><br></td>
</tr>
<tr>
<td bgcolor="red" height="50" width="50"><br></td>
<td bgcolor="yellow" height="50" width="220"><br></td>
<td bgcolor="red" height="50" width="50"><br></td>
</tr>
</table>
|
Seht ihr, ich bin doch ein ganz bunter Geselle :o) Denn wenn ich euch diese Tabelle anzeige bekommt ihr folgendes eingerahmte Bild von mir zu sehen. Ich habe euch diesmal nur den Tabellenbereich aufgeschrieben, ihr wisst ja schon, wo in eurem HTML-Dokument ihr diesen einsetzen könnt.
Bei dieser Tabelle ist mir noch etwas aufgefallen, das ich euch unbedingt noch sagen möchte. Bitte achtet bei den Tabellen immer darauf, dass in jeder Tabellenzeile gleich viele Zellen stehen. Dadurch verwirrt ihr Netscape nicht und eure Tabelle wird ordentlich angezeigt.
So nun ist sogar das Geheimnis enthüllt, wie Unki diese Seite gemacht hat, denn diese Seite besteht auch zu einen Grossteil aus Tabellen. So bildet das Menue dieser Seite eine Tabelle, aber auch dieser Text ist in einer Tabelle gespeichert *schmunzel* und mitten in der Tabelle treibe ich dann mein Unwesen... :o) Nebenbei die Farbgebung könnte eine Wolke ziemlich zum Schmunzeln bringen...aber das Risiko gehe ich mal einfach ein *winkt dennoch mal cloud vom Schattenbaum zu*.
 |
 |
|
|
