 |
|
Tabellen einfügen
Jetzt wollen wir eine Tabelle erstellen und ein wenig über deren Aufbau lernen. Dafür richten wir zunächst eine neue Seite ein.
Datei - Neues HTML Dokument
Titel der Seite: Meine Homepage - Tabelle
Bevor wir nun die Tabelle erstellen, speichern wie die neue Seite in den selben Ordner (tutorial) wie die erste Seite.
Dateiname: tabelle
Um eine Tabelle zu erstellen, bietet Phase 5 einen Tabellenassistenten. Diesen finden wir unter der Karte "Tabelle" (neben "Text"). Zuerst mit der Maus an die Stelle klicken, wo die Tabelle erscheinen soll (zwischen die Body-Tags) und anschließend auf "Eingabeassistent" klicken.
Dort wählen wir eine 2 x 3 Tabelle. Die "2" steht für die Anzahl der Spalten und die "3" für die Zeilen. Wir klicken auf "einfügen" und schließen das Fenster anschließend.
HTML-Text:
Aufbau einer Tabelle
Eine Tabelle wird mit <table> eingeleitet und mit </table> abgeschlossen.
<tr> leitet den Beginn der Zeile ein, welche mit </tr>abgeschlossen wird
und
<td> ist der Anfang einer Spalte der jeweiligen Zeile mit dem End-Tag </td>
Dies kann man am besten anhand der Tabelle selbst verstehen. Wenn man die soeben eingesetzte Tabelle in der Vorschau betrachten möchte, so sieht man erst mal gar nichts. Das liegt daran, dass die Tabelle bis jetzt weder einen Rahmen - noch eine Hintergrundfarbe hat. Einen Rahmen haben wir noch nicht eingerichtet und der Hintergrund ist momentan transparent.
Jetzt füllen wir die Tabelle zuerst mit Text. Als erstes schreiben wir zwischen das erste <td> </td> "Zeile 1, Spalte 1" und zwischen das zweite <td> </td>"Zeile 1, Spalte 2".
Im zweiten <tr> </tr>- Block (zweite Zeile) schreiben wir zwischen das erste <td> </td> "Zeile 2, Spalte 1" und in das Zweite "Zeile 2, Spalte 2".
Im dritten Block schreiben wir zwischen das erste <td> </td>"Zeile 3, Spalte 1" und zwischen das Zweite "Zeile 3, Spalte 2"
Der HTML-Text sieht nun folgendermaßen aus:
Tabellenrahmen
So richtig kann man aus der Vorschau immer noch keine Tabelle erkennen. Deshalb werden wir der Tabelle jetzt einen Rahmen (Gitterlinien) verpassen.
Dazu klicken wir mit der rechten Mousetaste in den Table-Start-Tag (<table>) irgendwo zwischen die Klammern. Es erscheint wieder ein Menü, aus dem wir "border" auswählen. Zwischen die Anführungszeichen nach "border" geben wir eine "1" ein.
HTML-Text:
Jetzt geben wir dem Rahmen eine andere Farbe.
Wir klicken mit rechts in den Table-Start-Tag. Dort gibt es (unter Anderem) die Punkte "bordercolordark" und "bordercolorlight". Wenn man beide Punkte nacheinander auswählt und jedem eine andere Farbe gibt, erzielt man einen 3D-Effekt des Rahmens. Wir möchten jetzt jedoch keinen zweifarbigen Rahmen, sondern nur einfarbig.
Anmerkung: Tabellenrahmen werden mit Netscape immer mit 3D-Effekt angezeigt.
Der Befehl für einen einfarbigen Rahmen lautet nur "bordercolor". Diesen Menüpunkt gibt es leider im Editor nicht. Wir wählen also eine der beiden Varianten aus und löschen im HTML-Text per Hand das "dark" oder "light" (je nachdem) weg. Jetzt klicken wir oben auf die Karte "Colors"
Nun setzen wir den Cursor zwischen die Anführungszeichen nach "bordercolor" und klicken mit der linken Mousetaste auf das dunklere Blau in der linken Reihe.
HTML-Text:
Wenn wir uns jetzt die Vorschau ansehen, fällt uns auf, dass der Rahmen als "Doppellinie" angezeigt wird. Es handelt sich dabei um das so genannte "cellspacing". Das ist der Abstand zwischen dem Tabellenhauptrahmen und den einzelnen Zellen (und zwischen den Zellen selbst). Dieses wird noch deutlicher, wenn wir diesen Abstand größer machen.
Dazu klicken wir wieder mit rechts in den Table-Start-Tag und wählen dort den Befehl "Cellspacing". Zwischen die Anführungszeichen tragen wir eine "10" ein.
Wenn man nur einen einfachen Rahmen haben möchte, setzt man den Wert bei Cellspacing auf "0". Man muss also den Cellspacing-Befehl in der Tabelle angeben und auf "0" setzen, wenn man eine einfache Linie möchte. Es reicht nicht, diesen Befehl einfach wegzulassen, da sonst automatisch diese kleine Lücke gelassen wird.
Setze also bitte cellspacing jetzt auf "0"
Nun möchten wir den Abstand zwischen Zelleninhalt und Rahmen vergrößern, damit der Text nicht direkt am Rahmen "klebt". Dies erreichen wir durch "cellpadding".
Rechtsklick in den Table-Start-Tag und "cellpadding" auswählen. Als Wert geben wir "10" ein.
HTML-Text:
Anmerkung: Auch beim "cellpadding" gilt: wenn man keine Angabe macht, ist ein kleiner Abstand da. Wenn man keinen Abstand zwischen Inhalt und Rahmen möchte, "cellpadding" auf "0" setzen.
Nun kann man ja nicht nur Texte in eine Tabelle einfügen, sondern auch Bilder. Das wollen wir jetzt machen. Das Bild soll in die erste Zeile in die erste Spalte. Dazu löschen wir erst mal aus dem ersten td-Tag den Inhalt ("Zeile 1, Spalte 1"). Wenn sich der Cursor zwischen den td-Tags befindet, klicken wir wieder links im oberen Fenster unseren Bilderordner an und klicken anschließend im unteren Datei-Fenster auf den Namen des Strandbildes.
HTML-Text:
In der ersten Zeile, Spalte 2 (rechts neben dem Bild) ist unser Text jetzt in der Zelle zentriert (in der Höhe). Wir möchten den Text nach oben setzen. Dazu klicken wir mit rechts in den td-Start-Tag der ersten Zeile, Spalte 2. Es öffnet sich ein Menü. Dort zeigen wir mit der Maus auf "valign" und es öffnet sich ein weiteres Menü, aus dem wir valign="top" auswählen.
HTML-Text:
Tabellen-Hintergrundfarben
Als letzten Punkt im Bereich Tabellen wollen wir die Tabelle und eine einzelne Zelle farbig gestalten. Zuerst gestalten wir den Hintergrund der kompletten Tabelle in Gelb. Dazu klicken wir mit Rechts in den Table-Start-Tag und wählen dort "bgcolor". Anschließend setzen wir den Cursor wieder zwischen die Anführungszeichen und wählen unter der Karte "Colors" ein helles Gelb aus.
Als nächstes werden wir den Hintergrund von Zeile 3, Spalte 2 andersfarbig gestalten. Wir klicken mit Rechts in den td-Start-Tag (der Unterste), klicken wieder auf "bgcolor", Cursor zwischen die Anführungszeichen und wählen jetzt ein Orange aus der Farbtabelle.
HTML-Text:
Die Farbnummern können jetzt natürlich wieder abweichen.
Dies waren jetzt die meiner Meinung nach wichtigsten Funktionen bei Tabellen.
|
|
|
