Tabelle 2 Steckbrief
1. Füge nach der ersten Tabelle eine zweite ein mit folgenden Attributen.
2. Schreibe in die erste Zelle den Text "Zelle 1", in die zweite den Text "Zelle 2".
3. Speichere die Datei und lade sie mit Safari.
So sollte die Tabelle unter dem Header aussehen.
4. Kopiere den Code von <tr> bis </tr> und setze ihn so oft wieder ein…
…bis du 11 Zeilen, bzw. 22 Zellen hast. Beschrifte alle Zelle mit fortlaufenden Zahlen (1 – 22)
5. Speichere und kontrolliere mit Safari
6. Gehe zurück und füge nach Zelle 2 eine weitere Zelle ein wie abgebildet.
Das Attribut "rowspan="11" bewirkt, dass die Zelle 11 Zeilen hoch ist. (Dort kommt später das Foto hin.)
7. Speichere und kontrolliere mit Safari.
8. Kopiere den Titel "Über mich" inkl. <h2> und </h2> in die Zelle 1.
9. Speichere und kontrolliere.
Um Schriftart, Abstände und Farbe kümmern wir uns später.
10. Alle Zellen, die einen Zeilentitel enthalten, sollen rechts ausgerichtet sein. (Ungerade Zellen)
Du kannst das Attribut kopieren und einsetzen.
11. Speichere und kontrolliere.
12. Kopiere die Zeilentitel "Name, Alter, etc" in die entsprechenden Zeilen
13. Zelle 15 => "10 CDs…"
Überlege dir, welche 10 CDs du auf eine einsame Insel mitnehmen würdest. Code wie abgebildet.
Anschliessend das Gleiche mit 10 DVDs.
14. Speichere und kontrolliere
15. Da wir nicht die Standardschrift "Times" verwenden wollen…
…schreibe unter den <body> den <font>-Tag wie abgebildet.
Der Tag sagt, dass der Browser die Schriftart "Helvetica" wählen soll. Wenn er die nicht hat dann "Arial". Und wenn er die auch nicht findet dann eine Schrift ohne Serifen (Füsschen).
16. Passe die Schriftgrösse im <table> an. Die gGrösse gilt für die gesamte Tabelle.
Du kannst die Grösse jederzeit ändern.
17. Wähle mit dem Photoshop Farbwähler eine Textfarbe, die gut mit der Hintergrundfarbe kontrastiert.
Bei dunklen Farben ist das meistens weiss. Klicke die Option "Nur Webfarben anzeigen" an.
17. Kopiere den <font>-Tag (Schrift) mit der Farbnummer in jede einzelne Zelle. (Nach dem <td>)
Geht leider nicht anders.
18. Sezte den Tabellenrand auf 0.
19. Definiere die Höhe der ersten Zeile (1). (Damit der Titel nicht zu nahe am Header liegt.)
Richte den Titel rechts (2) und unten (3) aus.
20. Gib im <table> das Attribut "cellspacing…" ein. Es macht Abstand zwischen den Zellen.
21. Ergänze alle <td> (Zellen) mit dem valign-Attribut.
In die eckigen Klammern hinein schreiben. An beliebiger Stelle.
22. Speichern und mit Safari kontrollieren. Kontrolliere auch mit Firefox und Camino.
Den Text unterhalb der Tabelle vom letzten Mal kannst du löschen.