Tabelle einfügen

HTML-Editor Hilfe

HTML-Editor Hilfe

Sind Sie ratlos?

Kommen wir nun zu einem Kernstück in der Seitengestaltung.
Wie in den vorangegangenen Kapiteln schon angedeutet, stellt die Tabelle einen wesentlichen Teil Ihres Seitenaufbaues dar.
Nehmen Sie ein Blatt Papier zur Hand und zeichnen Sie auf, wie Ihr Wunsch-Layout Ihres Webseitenbereiches aussehen soll.
Die meisten Programmierer machen es genauso.

Tabelle einfügen

Mit diesem unscheinbaren Knopf fängt alles an!

Unsere Handskizze

So soll es aussehen!

Wir bauen das nach!

Was sehen wir in unserer Skizze?

Tabelle 1 = 1 Zeile und 2 Spalten

Tabelle 2 = 1 Zeile und 1 Spalte

Tabelle 3 = 1 Zeile und 2 Spalten

.: Beim Gestalten (Programmieren) immer von links oben denken!

Beginnen wir mit der ersten Tabelle!

Aufgabe hier: 1 Zeile und 2 Spalten

Oben auf "Tabelle einfügen" klicken und es öffnet sich das abgebildete Fenster!

.: Wir haben in den Feldern - 1 Zeile und 2 Spalten - ausgewählt.
.: Die Tabellenbreite wurde auf 100% gesetzt.
.: Die Rahmenbreite belassen wir auf 1px = Pixel.
(Die Orientierung fällt leichter, wenn man beim Bearbeiten die
Abmessungen erkennt.)
Zum Schluss setzen wir die Rahmenbreite der Tabelle wieder auf "0"!

Wir klicken auf "OK"

So sollte es jetzt aussehen!

Wir wollen ja in der ersten Tabelle ein Bild verwenden!
Wie wir in unserer Handskizze sehen, soll es in die zweite Spalte.

Wir platzieren den Cursor in der zweiten Spalte!
(Wichtig, damit das Bild an die richtige Stelle kommt!)

Oben wählen wir den "File Manager*" (optional) aus.
In unserem Dateiaufbau sehen Sie den Ordner "Bilder".
Hier den Ordner "Bilder" mit einem Doppelklick öffnen!

Unsere Inhalte des File Managers!

Kann bei Ihnen völlig anders aussehen!

Wir Markieren eines der Bilder und klicken auf "Insert".

So müsste es jetzt aussehen!

Zugegeben, irgendwie komisch!

Nun klicken wir mit einem "Rechtsklick" neben dem Bild in die Zelle.
Es öffnet sich ein Fenster und wir wählen hier "Zelleneigenschaften" aus.

Im nächsten Fenster setzen wir unter "Horizontal ausrichten" das Bild
innerhalb der Zelle auf "Right" = Rechts.

Folgendes Bild ergibt sich:

So sollte es aussehen!

Wenn Sie anschliessend mit "OK" bestätigt haben, sollte es so aussehen:

Bild ist jetzt rechts ausgerichtet!

In der ersten Spalte unserer ersten Tabelle wollten wir Text einfügen!

Wir klicken in die zu bearbeitende Spalte!
.: (Der HTML-Editor muss immer wissen, wo er was machen soll!)

Direkt merken wir, dass der Cursor in der Mitte der Spalte ist.
Darum kümmern wir uns anschließend.

Wir fügen nun Text ein!
Markieren den Text und entscheiden uns für die Schriftart "Verdana"
Das bleibt aber Ihnen überlassen!

So sieht es jetzt aus!

Was haben wir gemacht?
Der Text ist jetzt "Verdana mit 12px Größe" und
den Titel haben wir "Fett" gemacht.

Wir müssen noch ausrichten!

Der Text hängt noch in der Mitte!
(Obwohl wir das im Beispiel nicht sehen.)

Das Bild ebenso.

Das ändern wir noch!

Fangen wir beim Bild an!

.: Wir setzen den Cursor in die zweite Spalte ( Nicht das Bild markieren!)
.: Klicken Sie die rechte Maustaste
.: Wählen Sie "Zelleneigenschaften - Vertikal ausrichten - Top" aus!

.: Das selbe machen wir in der linken Spalte mit dem Text.

So sollte es jetzt aussehen!

Beide Zellen sind oben ausgerichtet!

Wir entfernen den Rahmen.

Hierfür einfach ->
.: Mit der rechten Maustaste in die Tabelle klicken.
.: Tabelleneigenschaften auswählen.
.: Hier die Rahmenbreite auf "0px" setzen.

Super! Unsere erste Tabelle ist fertig!

Ist doch schon mal gut!

Beginnen wir mit der zweiten Tabelle!

Keine Angst, ab jetzt geht es schneller.

Aufgabe hier: 1 Zeile und 1 Spalte

Wir setzen den Cursor an die Stelle, an der unsere zweite Tabelle eingefügt werden soll.
.: Gehen Sie hierfür zuerst mit dem Cursor hinter die erste Tabelle und drücken Sie zweimal "Hochstelltaste + Eingabetaste".
(Durch das zusätzliche Verwenden der "Hochstelltaste" erhalten Sie eine einfache Zeilenschaltung.)

Wie oben schon gezeigt, wählen wir den Button "Tabelle einfügen" und stellen eine neue Tabelle mit einer Zeile und einer Spalte her.
.: Breite wieder auf "100%".
.: Rahmenbreite wieder auf "1px" lassen.

.: Fügen Sie Ihren Text in die Spalte ein.
.: Markieren Sie Ihren Text und wählen Sie eine Schriftart und die Schriftgröße.

.: Anschließend wieder die Rahmenbreite auf "0px" setzen.

und es müsste ungefähr so aussehen:

Kann sich doch schon sehen lassen!

Beginnen wir mit der dritten Tabelle!

Aufgabe hier: 1 Zeile und 2 Spalten
und Aufzählungszeichen

.: Wir fügen wieder, nachdem wir den Cursor an die richtige Stelle gebracht haben, eine Tabelle mit einer Zeile und zwei Spalten ein.

.: Breite wieder "100%".
.: Rahmenbreite wieder "1px".

Nach dem Eintragen unserer "Thesen" richten wir die Spalteninhalte wieder oben aus.

Nun können Sie beide Spalten markieren und oben auf "Aufzählungszeichen" klicken.
Alle Positionen sind nun entsprechend angepasst.

Zum Schluss setzen wir die Rahmenbreite wieder auf "0px" und das Werk ist vollendet.

Das war das Ziel !!!