Tabellen, oder alles verschachtelt.
Kennst du 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 dich mit der Vorliebe für Tabellen anzustecken. Mal sehen, ob ich da irgendwo ein Beispiel für dich habe. Den Aufbau eines HTML-Dokumentes kennst du 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 du das auf deiner Seite eingegeben hast, kann ich dir eine Tabelle zeigen, die dann wie folgende ausschaut. :
1. Zeile 1. Spalte |
1. Zeile 2. Spalte |
2. Zeile 1. Spalte |
2. Zeile 2. Spalte |
Du siehst mit <tr> beginnst du eine Zeile in der mit <td> dann Spalten gesetzt werden. Diese Spalten schließt du mit </td> und wechselst zur nächsten Zeile indem du deine Zeile mit </tr> beendest.
Soweit hast du nun schon einmal eine einfache Tabelle gezeichnet. Bemerkst du eigentlich den Rand der Tabelle? Dieser kommt durch border="1". Erinnerst du dich, wo du dieses schon einmal gelesen hast? Richtig, dieses kam bei den Bildern vor. So Tabellen haben nämlich auch die Möglichkeiten wie Bilder und können sogar eingefärbt werden.
Du kannst den einzelnen Tabellenspalten eine eigene Größe zuweisen und sogar den Text darin etwas ausrichten. In den <td>Spaltenbereich</td> kannst du alles, was in HTML möglich ist verwenden. :o) Bei der Ausrichtung gibt es jedoch auch eine besondere Möglichkeit. Du kannst nicht nur mit align arbeiten sondern auch mit valign. Mit Valign kannst du 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 dir 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:
Schau dir mal diese Tabelle ganz genau an... 8-) Du siehst Nummer 1 steht ganz in der Mitte und obwohl wir beide ihr keine Größenangebe gegeben haben ist sie auch in einer großen Tabellenzelle. Dieses liegt daran, daß wir der Tabelle unterhalb von Nummer 1 eine genaue Breite gegeben haben. Bei einer Tabelle sind alle untereinander liegenden Zellen gleich groß. Jedoch kannst du 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).
Laß 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. Du bekommst es nicht angezeigt, aber mir ist dadurch klar, daß ich diese Tabellenzelle auch darstellen soll.
Gehen wir jetzt einmal in die zweite Zeile zum Hallo und den ???. Du siehst einmal, daß 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 kannst du also schon farbige Tabellen mit ausgerichtetem Text zeichen. Aber nun verrate ich dir mal ein Geheimnis von Unki. Er mag Tabellen deswegen so furchtbar gerne, da man auch den Tabellenrand ausblenden kann. Wenn du border="0" setzt kannst du durch die Tabelle ganz tolle Effekte erzielen.
Hey dieses bringt mich auf eine Idee. Wir machen mir mal einen bunten Rahmen. Einverstanden? Naja ich nehme mal schnell ein passendes HTML-Dokument und zeige dir 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 dir diese Tabelle anzeige bekommst du folgendes eingerahmte Bild von mir zu sehen. Ich habe dir diesmal nur den Tabellenbereich aufgeschrieben, du weißt ja schon, wo in deinem HTML-Dokument du diesen einsetzen kannst.
Bei dieser Tabelle ist mir noch etwas aufgefallen, das ich dir unbedingt noch etwas sagen möchte. Bitte achte bei den Tabellen immer darauf, daß in jeder Tabellenzeile gleich viele Zellen stehen. Dadurch verwirrst du Netscape nicht und deine Tabelle wird ordentlich angezeigt.
So nun ist sogar das Geheimnis enthüllt, wie Unki diese Seite gemacht hat, denn die beiden grünen Balken links und rechts sind ebenfalls durch eine große Tabelle entstanden. *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*.
» Zurück «.
|