Webdesign 9 - Tabellen

9. Tabellen

Tabellen sind durch Zweckentfremdung ein wichtiges Gestaltungsmittel geworden: viele Leute bauen ihre Webseitenlayouts mit Tabellen, wobei diese nicht unbedingt dafür gemacht sind. Sicherlich geht es, aber mit einem CSS-Layout fährt man doch sehr viel besser (schnellere Ladezeiten, Layout jederzeit durch wenige Handgriffe komplett veränderbar usw.).
Der eigentliche Sinn einer Tabelle ist die (tabellarische) Anordnung von Daten und Informationen. Dies können Texte, Bilder, Links usw. sein.

Eine Tabelle wird von folgenden Tags umschlossen:

Code:

<table> ... </table>

Sie besteht aus mehreren Zeilen (tr -> table row = Tabellenzeile), welche in Zellen (td -> table data = Tabellendaten) aufgeteilt sind. In den Zellen steht dann der eigentliche Inhalt.

Eine Tabelle ist also wie folgt aufgebaut:

Code:

<table>
  <tr>
      <td> … Text in Zeile 1, Spalte 1 … </td>
      <td> … Text in Zeile 1, Spalte 2 … </td>
  </tr>
  <tr>
      <td> … Text in Zeile 2, Spalte 1 … </td>
      <td> … Text in Zeile 2, Spalte 2 … </td>
  </tr>
</table>

Damit ein Gitternetz sichtbar wird, muss dem table-Tag noch das Attribut „border“ mit dem Wert 1 (je höher der Wert, umso dicker wird der Tabellenrahmen) hinzugefügt werden, dass es so aussieht:

Code:

<table border=“1“>
      ...
</table>

Bei Tabellen stehen uns zahlreiche Attribute zur Verfügung, um diese nach unseren Wünschen zu formatieren.
Folgende Möglichkeiten gibt es, die ganze Tabelle mittels <table>-Tag anzupassen:

align=“left“
-> richtet die gesamte Tabelle innerhalb des Browserfensters aus
-> Werte: “left“ oder “right“ oder “center“

width=“500“
-> gibt die Breite der Tabelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Tabelle mehr Platz, wird der Wert ignoriert
-> Werte: z.B. “400“ oder “80%“

height=“800“
-> gibt die Höhe der Tabelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Tabelle mehr Platz, wird der Wert ignoriert
-> Werte: z.B. “800“ oder “90%“

border=“1“
-> erzeugt einen Rahmen um die Tabelle; bei einer unsichtbaren Layout-Tabelle, sollte immer border=“0“ gesetzt sein
-> Werte: z.B. “4“

bordercolor=“#000000“
-> 6-stelliger Farbwert (siehe https://otaku-welt.forumieren.de/tutorials-kurse-f16/webdesign-5-farben-t89.htm) für den Rahmen; es ist empfehlenswerter, den Rahmen mit CSS zu stylen
-> Werte: z.B. “#ffffff“ oder “blue“

bgcolor=“#ffffff“
-> 6-stelliger Farbwert (siehe https://otaku-welt.forumieren.de/tutorials-kurse-f16/webdesign-5-farben-t89.htm) für den Hintergrund der Tabelle, überdeckt die Hintergrundfarbe der Seite
-> Werte: z.B. “#444444“ oder “red“

background=“ URL_des_Bildes“
-> fügt ein Hintergrundbild ein
-> Werte: absoluter oder relativer Pfad zum Bild

cellpadding=“10“
-> gibt den Abstand vom Text/Bild des Zelleninhaltes zum Rand der Zelle in Px an
-> Werte: z.B. “50“ oder “5“

cellspacing=“3“
-> gibt die Breite der Zellränder in Px an
-> Werte: z.B. “10“ oder “40“


Natürlich kann man auch einzelne Zeilen im <tr>-Tag anpassen:

align=“left“
-> richtet die Inhalte einer Zeile horizontal aus
-> Werte: “left“ oder “right“ oder “center“ oder “justify"

valign=“top“
-> richtet die Inhalte einer Zeile vertikal aus
-> Werte: “top“ oder “middle“ oder “bottom“

bgcolor=“#ffffff“
-> 6-stelliger Farbwert (siehe https://otaku-welt.forumieren.de/tutorials-kurse-f16/webdesign-5-farben-t89.htm) für den Hintergrund der Zeile, überdeckt die Hintergrundfarbe der Seite
-> Werte: z.B. “#444444“ oder “red“


Ebenso kann man auch einzelne Zellen mit <td>-Tag anpassen:

align=“left“
-> richtet die Inhalte einer Zelle horizontal aus
-> Werte: “left“ oder “right“ oder “center“ oder “justify"

valign=“top“
-> richtet die Inhalte einer Zelle vertikal aus
-> Werte: “top“ oder “middle“ oder “bottom“

width=“200“
-> gibt die Breite der Zelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Zelle mehr Platz, wird der Wert ignoriert
-> Werte: z.B. “300“ oder “60%“

height=“600“
-> gibt die Höhe der Zelle in Px an, Prozentangaben sind auch möglich; benötigt der Inhalt einer Zelle mehr Platz, wird der Wert ignoriert
-> Werte: z.B. “445“ oder “40%“

colspan=“3“
-> definiert, dass sich eine Zelle über die angegebene Anzahl von Spalten der Tabelle erstrecken soll
-> Werte: z.B. “3“

rowspan=“5“
-> definiert, dass sich eine Zelle über die angegebene Anzahl von Zeilen der Tabelle erstrecken soll
-> Werte: z.B. “4“


Gerade Tabellen sind für einen HTML-Neuling immer sehr verwirrend. Da helfen WYSIWYG-Editoren meist wunder und erleichtern die Erstellung ungemein
Hier ist wohl „üben üben üben“ angesagt, so schwer ist es nicht.



~~~
Und wieder ist ein Kapitel fertig Nächste Woche gehts dann weiter mit "Frames ".
Wer Fragen hat, kann die ganz einfach hier im Forum (einfach auf "antworten" klicken, auch als Gast) loswerden oder mir eine eMail schicken.

Um eure erworbenen Kenntnisse zu "testen" und zu
festigen, könnt ihr die folgende Aufgabe lösen. Die fertige Datei könnt
ihr mir dann per eMail (webmaster@otaku-welt.de) zuschicken - ich werfe
einen Blick darauf und gebe euch ein Feedback.


Aufgabe zu diesem Kurs:

Erstelle eine Tabelle mit 11 Zeilen und 5 Spalten, befülle diese mit beliebigem Inhalt.
Die Tabelle soll 800 px breit sein und eine angenehme Hintergrundfarbe besitzen. Einzelne Zellen sollen mit Hintergrundfarben hervorgehoben werden.