6. Tabellen

Theorie!

Tabellen bieten nicht nur die Möglichkeit, Texte und Zahlen in Zeilen und Spalten übersichtlich darzustellen. Sie sind, besonders dann, wenn auf Rahmendarstellungen verzichtet wird, hervorragend geeignet, Internetseiten grafisch zu gestalten. So können Texte neben Bilder gesetzt oder bestimmte Elemente auf einer Seite frei, z.B. nebeneinander oder übereinander, platziert werden.

<table>

<tr>
<td> ...</td>
<td> ...</td>
</tr>

<tr>
<td> ... </td>
<td> ... </td>
</tr>

</table>

Eine Tabelle besteht aus Zeilen (<tr>) und Zellen in einer Zeile (<td>). In der Tabelle, die immer mit <table> beginnt und mit </table> endet, können natürlich mehrere Zeilen und mehrere Zellen, die sich dann als Spalten darstellen, aufgenommen werden.

Das nebenstehende Beispiel enthält zwei Zeilen und zwei Spalten (zwei Zellen je Zeile).
In den Zellen, also zwischen <td> und </td> können Texte und Grafiken, aber auch Links, eingefügt werden.

         
         
Erweiterungen des <table>-Befehls

<table border="1" bgcolor="gewünschter Farbwert">
Soll ein Rahmen angezeigt werden, dann ist die Ergänzung border="..." einzufügen. Die Ziffern bestimmen die Rahmenbreite.

bgcolor="..." bestimmt die Hintergrundfarbe.

<table border="0" width="300" hight="300">
gibt die Breite und Höhe der Tabelle in Bildpunkten an, hier 300. Anstelle der Bildpunkte können auch Prozentangaben bezogen auf die Bildschirmgröße eingetragen werden, z.B. "30%".


Erweiterungen des <td>-Befehls

<td valign="top" align="right"> ... </td>
Normalerweise wird eingegebener Text in einer Zelle sowohl horizontal als auch vertikal zentriert. Soll dieses nicht geschehen, z.B. Ausrichtung nach oben oder nach rechts, sind Zusätze im <td>-Befehl notwendig.
valign="top" - vertikale Ausrichtung nach oben
weitere Befehle: "middle" oder "bottom"

align="right" - horizontale Ausrichtung nach rechts
weitere Befehle: "left" oder "center"

Praxis!

Die Karteikarte "Tabelle" in der Symbolleiste bietet die wichtigsten Befehle zur Erstellung von Tabellen an:

Karteikarte Tabelle

Befehl
erzeugter Quellcode
Browserdarstellung

Zum Eingabeassistenten ...
 Mit dem Eingabeassistenten können Tabellen sehr komfortabel erstellt werden. Ein Klick auf den Button öffnet ein Fenster, in dem die Zeilen- und Spaltenzahl bestimmt und Texte in die jeweils angelegten Zellen eingefügt werden können. Mit der Schaltfläche "Einfügen" wird der HTML-Code erzeugt, der natürlich nachträglich noch weiter verändert werden kann.

Eingabeassistent

Der mit dem Eingabeassistenten erzeugte Quellcode:

Tabellen-Quellcode
 Tabelle ohne Rahmen
  Mit der Table-Erweiterung border="3" lässt sich die Tabelle mit Rahmen darstellen, hier in der Stärke "3".
Tabelle mit Rahmen

Rahmenfarbe
 bgcolor="" bordercolor="" bordercolorlight="" bordercolordark=""

Mit diesen Table-Erweiterungsbefehlen kann die Tabellen-Hintergrundfarbe und die Farben des Rahmens durch Eingabe der Farbnamen oder des Farbcodes bestimmt werden.

Beispiel:

<table border="6" bgcolor="yellow" bordercolorlight="red" bordercolordark="darkblue">
<tr>
<td>Zelle 1 </td>
<td>Zelle 2 </td>
</tr>
<tr>
<td>Zelle 3 </td>
<td>Zelle 4 </td>
</tr>
</table>

oder

<table border="6" bgcolor="yellow" bordercolor="green">
<tr>
<td>Zelle 1 </td>
<td>Zelle 2 </td>
</tr>
<tr>
<td>Zelle 3 </td>
<td>Zelle 4 </td>
</tr>
</table>

Zelle 1 Zelle 2
Zelle 3 Zelle 4







Zelle 1 Zelle 2
Zelle 3 Zelle 4


Neue Zeile einfügen
 <tr>
<td> </td>
<td> </td>
</tr>

Dieser Befehl fügt eine neue Zeile mit 2 Zellen ein. Der Cursor muss vorher an die richtige Stelle zwischen dem <table>-Anfangs- und </table>-Endbefehl gesetzt werden.

Zusätzliche Zellen müssen manuell, z.B. durch Kopieren, eingefügt werden!

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Tabellenüberschrift
 <tr>
<th colspan="2">Überschrifttext</th>
</tr>

Eine Tabellenüberschrift verbindet die Zellen einer Zeile und stellt den eingefügten Text fett dar. "Colspan" gibt die Anzahl der Tabellenspalten an (Standard "2").

Beispiel - Tabelle mit drei Spalten und einer Überschrift:

<table border="2">

<tr>
<th colspan="3">Tabellen-Überschrift</th>
</tr>

<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>

<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>

</table>

Tabellen-Überschrift
1 2 3
4 5 6

Arbeitsaufgaben

  1. Nutze den Eingabeassistenten, und erstelle eine Tabelle mit 3 Spalten und 4 Zeilen. Füge in jede Zelle Text ein.
  2. Stelle die Tabelle mit gelbem Hintergrund und grünem Rahmen in der Stärke 4 dar.
  3. Ersetze an einer Stelle den Text durch eine Grafik (Image).
  4. Füge dieser Tabelle eine Überschrift hinzu.
  5. Nutze nach dieser Übung den Tabellenbefehl zur grafischen Gestaltung deiner Website, z.B. als Blindtabelle (border="0").

Zurück zur Übersicht "Eigene Homepage"
Home