Tabellen für ein gelungenes Webdesign

„Wozu brauche ich denn Tabellen bei der Internetseitengestaltung? Wir machen doch keine Tabellenkalkulation!“. Das wird den meisten angehenden Webgestaltern einfallen, wenn sie hören, dass Tabellen einen wichtigen Beitrag bei der Internetseitengestaltung leisten.

Mit der Hilfe von unsichtbaren Tabellen können z.B. die Inhalte der Internetseite positioniert bzw. ausgerichtet werden. Zudem bieten Tabellen die Möglichkeit, mit unterschiedlichen Hintergründen auf der Seite zu arbeiten.

Eine Tabelle einfügen

Um eine Tabelle einzufügen, klicken Sie in der Menüleiste auf „Tabelle“ und wählen dort „Tabelle einfügen“, worauf nachfolgend abgebildetes Fenster erscheint:

Hier können Sie festlegen aus wie vielen Zeilen und Spalten die Tabelle bestehen soll. In der Abbildung soll die Tabelle aus fünf Zeilen bestehen, die in zwei Spalten aufgeteilt sind.

Im Bereich „Layout“ können Sie festlegen, ob die Tabelle auf der Seite linksbündig, zentriert oder rechtsbündig erscheinen soll. Zudem wird die Dicke der Rahmenlinien festgelegt. Bei einem Wert von Null erhalten sie eine unsichtbare Tabelle.

Außerdem kann der Textabstand von den Zellenwänden und der Abstand der einzelnen Zellen von einander definiert werden.

Im Bereich „Breite“ wird die Gesamtbreite der Tabelle bestimmt. Wählen Sie einen Wert in Pixeln, so hat die Tabelle unabhängig von der Größe

des Browserfensters oder der Bildschirmauflösung immer diesen Wert. Bei einer prozentualen Auflösung beträgt die Tabellengröße immer einen prozentualen Anteil an der Seitengröße; d.h. bei sich verändernder Größe des Browserfenster verändert sich auch das Aussehen der Tabelle.

So würde das Beispiel von oben aussehen:

In die einzelnen Zellen können beliebige Texte, aber auch Bilder, wie eingangs beschrieben, eingefügt werden.

Tabelleneigenschaften nachträglich verändern

Natürlich können die Tabelleneigenschaften nachträglich noch verändert werden.

Klicken Sie dazu in eine beliebige Spalte Ihrer Tabelle und wählen auf der Menüleiste „Tabelle“ und dort den Eintrag „Tabelleneigenschaften“. Darauf erscheint das nachfolgend abgebildete Fenster:

In den Feldern „Layout“ und „Mindestbreite“ können Sie, die im Kapitel beschriebenen Angaben wieder ändern. Das Fenster „Tabellen-eigenschaften“ bietet aber zudem im Bereich „Benutzer-

definierter Hintergrund“ die Möglichkeit, eine eigene Hintergrund-farbe oder gar

ein Hintergrundbild festzulegen. Im vorliegenden Beispiel wurde blau als Hintergrundfarbe für die gesamte Tabelle gewählt.

Im Bereich „Benutzerdefinierte Farben“ kann den Linien der Tabelle eine Farbe zugewiesen werden. Im vorliegenden Beispiel wurde schwarz als Linienfarbe gewählt. Mit den Optionsflächen „Heller Rahmen“ und „Dunkler Rahmen“ können den Tabellenlinien noch weitere Farben als Schatten zugewiesen werden, womit man 3D-Effekte erzielen kann.

Die Zuweisung von Linienfarben macht allerdings nur Sinn, wenn es sich nicht um eine unsichtbare Tabelle handelt.

Unser Beispiel sieht jetzt wie folgt aus:

Einzelne Zellen formatieren

Natürlich kann auch jede Zelle einzeln formatiert werden. Klicken Sie mit der Maus in die Zelle, die Sie formatieren möchten und wählen in der Menüleiste den Eintrag „Tabelle“ und dort „Zelleneigenschaften“. Darauf öffnet sich das nachfolgend abgebildete Fenster, in welchem Sie die Zelleneigenschaften verändern können.

Bei den nachfolgenden Ausführungen werden nur die für Einsteiger wichtigen Einstellungen erläutert!

Im Bereich „Layout“ kann festgelegt werden, ob der Inhalt der Zelle bezogen auf die Zelle linksbündig, zentriert oder rechtsbündig ausgerichtet wird (Feld: „Horizontale Ausrichtung“). Zudem wird definiert, ob die Elemente oben, in der Mitte oder am unteren Zellenrand ausgerichtet sind (Feld „Vertikale Ausrichtung“).

Mit Hilfe des Bereiches „Mindestbreite“ können Sie festlegen, welche Breite die Zelle haben soll. Im Beispiel wurde 70% ausgewählt, d.h. dass die Zellenbreite 70% der Gesamtbreite der Tabelle beträgt.

Achtung! Die Einstellungen in diesem Bereich werden für alle anderen Zellen der Spalte übernommen; d.h. alle Zellen der linken Spalte haben eine Breite von 70% der gesamten Tabelle.

Sie können im Bereich „Benutzerdefinierter Hintergrund“ der Zelle ein eigenes Hintergrundbild oder eine Hintergrundfarbe zuweisen. Im vorliegenden Beispiel wurde gelb als Hintergrundfarbe für die Zelle gewählt.

Im Bereich „Benutzerdefinierte Farben“ können Sie für die Zellenumrandung geeignete Farben auswählen. Im Beispiel wurde rot gewählt.

Unser Beispiel würde nun wie folgt aussehen:

Zellen verbinden

Manchmal macht es Sinn, einzelne Zellen miteinander zu verbinden. Im nachfolgenden Beispiel findet sich in der Linken Zelle ein Bild und in der rechten ein erläuternder Text. Nun sollen diese beiden Zellen eine Überschrift erhalten, die sich über beiden Zellen erstreckt (s. nachfolgendes Bild).

Um zwei Zeilen zu verbinden, klicken Sie mit der linken Maustaste in die erste der zusammenzuführenden Zellen und halten die linke Maustaste gedrückt. Dann ziehen Sie den Mauszeiger in die Zelle, die mit der ersten Zelle verbunden werden soll.

Wenn Sie auf diese Weise alle Zellen, die miteinander verbunden werden sollen, markiert haben, klicken Sie in der Menüleiste auf den Eintrag „Tabelle“ und dort auf „Zellen verbinden“. Danach werden die von Ihnen ausgewählten Zellen zu einer einzigen Zelle verbunden.

Grundsätzlich können nur nebeneinander liegende Zellen miteinander verbunden werden. Dabei spielt es keine Rolle, ob die Zellen nebeneinander oder untereinander liegen.

Zellen teilen

Manchmal ist es auch erforderlich, eine Tabelle vertikal oder horizontal in weitere Zellen aufzuteilen. Klicken Sie dazu in die zu teilende Zelle und wählen in der Menüleiste den Eintrag „Tabelle“ und dort „Zellen teilen“, worauf sich das nachfolgende Fenster öffnet:

Hier können Sie festlegen, ob die Zelle horizontal oder vertikal aufgesplittet und in wie viele Teile diese zerlegt werden soll.

Mit Klick auf die Taste „OK“ wird die Aktion schließlich ausgeführt.

Zeilen oder ganze Spalten löschen

Um eine Zeile oder spalte zu löschen, markieren Sie die zu löschenden Zeilen, und klicken dann die Taste „Entf“. Darauf werden die entsprechenden Zellen gelöscht bzw. entfernt.

Neue Zeilen einfügen

Klicken Sie in die Zeile über oder unter der eine neue Zeile eingefügt werden soll und wählen in der Menüleiste den Eintrag „Zeilen oder Spalten einfügen“. Darauf öffnet sich das nachfolgende Fenster:

Hier können Sie entscheiden, wie viele neue Zeilen sie einfügen wollen, und ob dies über der Zelle, in welcher Sie zuvor den Mauszeiger abgesetzt haben, geschehen soll oder unterhalb.

Mit Klick auf das „OK“-Button werden die entsprechenden Zellen eingefügt.

Die Tabelle in der Zelle

In einzelne Zellen können sogar komplett neue Tabellen eingefügt werden. Klicken Sie dazu die Zelle, in welche die Tabelle eingefügt werden soll, mit der linken Maustaste an, um diese zu markieren. In der Menüleiste wählen Sie den Eintrag „Tabelle“ und dann „Tabelle einfügen“. Im sich öffnenden Fenster können Sie nun alle Einstellungen vornehmen und mit einem Klick auf das „OK“-Button wird die Tabelle in die Zelle eingefügt.

Im nachfolgen Beispiel wurde eine Tabelle mit zwei Spalten und drei Zeilen in die Zelle einer Tabelle eingefügt: