StarHTML HTML-Wissen Tabellen erstellen und formatieren

Tabellen erstellen und formatieren

Tabellen erstellen  Höhe und Breite festlegen  Ausrichten von Zelleninhalten  Zellen verbinden  Hintergrundfarben

Tabellen erstellen

Innerhalb einer Zelle können Sie Texte, Bilder und andere Elemente einsetzen. Wenn Sie den Inhalt einer Zelle als Überschrift der Spalte definieren wollen, setzen Sie statt <td> <th> ein (th = table header = Tabellenkopf). Die Inhalte dieser Zelle werden automatisch hervorgehoben. Bei Netscape fett und zentriert.

<table> <tr> <th> <th> <tr> <td> <td> </table>

Tabelle beginnt Erste Zeile beginnt 1. Zelle der 1. Zeile (1. Spaltenüberschrift) 2. Zelle der 1. Zeile (2. Spaltenüberschrift) Zweite Zeile beginnt 1. Zelle der 2. Zeile 2. Zelle der 2. Zeile Tabellenende

Im einleitenden Tag <table> können noch folgende Optionen erscheinen:

• Mit border legen Sie fest, dass die Rahmen der Tabelle sichtbar sind. Standardmäßig werden die Rahmen nämlich nicht angezeigt. Wenn Sie statt border border=* angeben, können Sie die Außen-Rahmendicke mit * in Pixeln festlegen.
• Mit cellspacing=* (cellspacing = Zellenbemaßung) legen Sie die Dicke der Gitternetzlinien fest - ebenfalls in Pixeln.
• Mit cellpadding=* (cellpadding = Zelleninhaltbemaßung) legen Sie den Abstand des Zelleninhalts zu den Gitternetzlinien fest - ebenfalls in Pixeln.

Übrigens: Sie können auch mehrere Tabellen ineinander verschachteln, müssen dann aber bei der inneren Tabelle die Befehle zum Beenden einer Zelle </td> bzw. einer Zeile </tr> einsetzen.

<table>
  <tr>
    <td>Inhalt
    <td>
     <table>
      <tr>
       <th>Inhalt</th>
       <th>Inhalt</th>
      </tr>
      <tr>
       <td>Inhalt</td>
       <td>Inhalt</td>
      </tr>
    </table>
</table>

Höhe und Breite festlegen

Mit width=* bzw. height=* im Tabellen Tag <table> können Sie der gesamten Tabelle eine bestimmte Größe zwingend zuweisen. Die Angabe der Breite kann in Pixeln oder Prozent (z.B. "60%" ) des Browser-Fensters erfolgen, die der Höhe jedoch nur in Pixeln.
Sie können aber auch die Höhe bzw. Breite einzelner Zeilen oder Spalten festlegen:

In jedem Zellen-Tag (<td> bzw. <th>) können Sie die Höhe für die gesamten Zeile und die Breite für die gesamte Spalte angeben (Sollte die angegebene Größe nicht ausreichen, wird der Befehl unwirksam!).
Die Höhe bestimmen Sie mit height=*, die Breite mit width=* in Pixeln. Bei der Breite einzelner Spalten sind auch Prozentangaben möglich, diese bezieht sich auf die Gesamtbreite der Tabelle.
Mit nowrap im Zellen-Tag können Sie Zeilenumbrüche innerhalb der Zelle verhindern, die Breite wird entsprechend angepasst.

Ausrichten von Zelleninhalten

Indem Sie in <td> oder <th> für eine einzelne Zellen oder <tr> für eine gesamte Zeile valign=top eintragen, wird der gesamte Inhalt nach oben ausgerichtet und mit valign=bottom untenbündig.
Indem Sie in <td> oder <th> für eine einzelne Zellen oder <tr> für eine gesamte Zeile align=right eintragen, wird der gesamte Inhalt nach rechts ausgerichtet, mit align=center zentriert und mit align=left linksbündig. (align = Ausrichtung, valign = vertical align = vertikale Ausrichtung).

Zellen verbinden

Um mehrere Zellen einer Spalte zu verbinden, tragen Sie in dem Tag der obersten Zelle (die, die in der Datei zuerst definiert wird) rowspan=* ein (rowspan = Zeilen spannen). Für * setzen Sie die Anzahl der miteinander zu verbindenden Zellen ein. Wenn Sie die Zeilen definieren, in denen der untere Teil der verbundenen Zellen liegt, überspringen Sie einfach die Zelle. Zuerst geben Sie also alle Zellen an, die vor der verbundenen Zelle liegen und dann die dahinter. Beachten Sie:
Hat die Tabelle weniger Zeilen als Sie miteinander verbinden wollen, wird der Befehl unwirksam.

Um mehrere Zellen einer Zeile zu verbinden, tragen Sie in dem Tag der ersten Zelle von links colspan=* ein (colspan = column span = Spalten spannen). Für * setzen Sie die Anzahl der miteinander zu verbindenden Zellen ein.
Beachten Sie: Hat die Tabelle weniger Spalten als Sie miteinander verbinden wollen, wird der Befehl unwirksam.

Sie können ebenfalls mehrere Zellen zeilen- und spaltenweise gleichzeitig miteinander verbinden. Setzen Sie in der einzelnen Zelle, die im Zellenverband ganz links oben liegen soll, rowspan=* und colspan=* gleichzeitig ein, mit der jeweiligen Anzahl anstelle von *.

Hintergrundfarben

Praxis: Tabellen werden oft genutzt, um neben einem Text Kommentare oder Verweise einzufügen (Navigieren innerhalb der Seite/des Projektes). Sie können auch die gesamte Seite in eine Tabelle packen, um eine bestimmte Breite festzulegen (wie bei StarHTML).

Tabellen haben auch einen großen Nachteil: In jeder neuen Zelle gilt zunächst die (im Browser eingestellte) Standard-Schriftart und Größe! Sie müssen diese für jede Zelle neu ändern, wenn Sie nicht TimesNewRoman verwenden oder sichergehen wollen, dass die Seite überall gleich aussieht.

Vorallem mit blinden Tabellen, d.h. ohne sichtbare Gitternetzlinien, lässt sich viel anstellen!