Erstellung und Bearbeitung von Tabellen Teil 1

Grundlagen

Der Menübefehl
Tabelle > einfügen > Tabelle öffnet das folgende Fenster:



Klickt man auf ok erhält man eine Tabelle die folgendermaßen aussieht:



Der HTML-Quellcode für diese Minitabelle sieht so aus:

<table style="text-align: left; width: 127px; height: 64px;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"></td>
      <td align="undefined" valign="undefined"></td>
    </tr>
    <tr>
      <td align="undefined" valign="undefined"></td>
      <td align="undefined" valign="undefined"></td>
    </tr>
  </tbody>
</table>

Die erste Zeile
<table style="text-align: left; width: 127px; height: 64px;" border="1" cellpadding="2" cellspacing="2">
legt das Erscheinungsbild der gesamten Tabelle fest. Dabei bestimmt

• width: 127px; height: 64px Breite und Höhe der Tabelle
• border="1" die Stärke/Dicke des Außenrahmensrahmens
• cellpadding="2" den Abstand des (hier noch nicht vorhandenen) Textes zum Rahmen
• cellspacing="2" den Abstand zwischen den Zellen

Es gibt nunmehr verschiednene Möglichkeiten das Erscheinungsbild der Tabelle anzupassen. Eine Möglichkeit ist, direkt im KompoZer im Quelltextmodus Veränderungen vorzunehmen.
Wenn wir beispielsweise im Quelltext border="1" auf border="6" ändern, können wir gleich im Normalmodus das Ergebnis überprüfen. Es müsste so aussehen:



Wenn man border="0" vorgibt, erhält man eine sogenannte Blindtabelle. D.h., dass die leere Tabelle zwar Platz auf der Webseite einnimmt, jedoch nicht zu sehen ist. Wenn man so eine Tabelle mit Text füllt, wird dieser Text auch, wie es sich für eine Tabelle gehört, in Tabellenform angeordnet.

Das Erscheinungsbild der Tabelle kann aber auch im Normalmodus geändert werden. Dazu wird die Tabelle markiert und mit der rechten Maustaste angeklickt. Es erscheint das folgende Menü:



Hier wählen wir Tabellenzelle - Eigenschaften. Darauf erscheint das folgende Fenster:



Hier lassen sich die verschiedenen Eigenschaften der Tabelle zellen-, zeilen- oder spaltenweise ändern. Wir klicken auf den Reiter Tabelle und geben dort im Feld Rand den Wert 6 ein. Das Ergebnis ist das gleiche wie in der vorher beschriebenen direkten Änderung des HTML-Quellkodes.