E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Tabellen

Tabellen

Tabellen sind für viele verschiedene Anlässe nutzbar. Es gibt 3 bzw. 4 wichtige Tags um Tabellen zu erstellen. Die komplette Tabelle muss in die Tags <table> und </table> eingegliedert werden. Bei einer Tabelle ist es wichtig, dass Sie immer "horizontal" denken / arbeiten. Der 2. wichtige Code sind die Tags <tr> und </tr> Mit diesem Befehl wird eine "Art" horizontale Linie erzeugt (eine Zeile). Der 3. Befehl ist für die Spalten gedacht. Die Tags dazu heißen <td> und </td> Der 4. Befehl gehört zum 3. Befehl. Mit dem 4. Befehl können Sie eine Spalte erzeugen, im Gegensatz zu Code 3 wird hier der Text fettgedruckt (für die Kopfzeile). Die Tags dazu lauten <th> und </th>

<table>
  <tr>
    <th>Kopf Spalte 1</th>
    <th>Kopf Spalte 2</th>
    <th>Kopf Spalte 3</th>
    <th>Kopf Spalte 4</th>
    <th>Kopf Spalte 5</th>
  </tr>
  <tr>
    <td>Inhalt 1 Spalte 1</td>
    <td>Inhalt 1 Spalte 2</td>
    <td>Inhalt 1 Spalte 3</td>
    <td>Inhalt 1 Spalte 4</td>
    <td>Inhalt 1 Spalte 5</td>
  </tr>
  <tr>
    <td>Inhalt 2 Spalte 1</td>
    <td>Inhalt 2 Spalte 2</td>
    <td>Inhalt 2 Spalte 3</td>
    <td>Inhalt 2 Spalte 4</td>
    <td>Inhalt 2 Spalte 5</td>
  </tr>
  <tr>
    <td>Inhalt 3 Spalte 1</td>
    <td>Inhalt 3 Spalte 2</td>
    <td>Inhalt 3 Spalte 3</td>
    <td>Inhalt 3 Spalte 4</td>
    <td>Inhalt 3 Spalte 5</td>
  </tr>
</table>
Anzeigebeispiel
Anzeigebeispiel


Sie können eine Tabelle in 3 Teile einteilen: Tabellen-Kopf, Tabellen-Körper und Tabellen-Fuß. Innerhalb der Tabellen-Tags (table) verwenden Sie einfach die Tags <thead> und </thead>, <tbody> und </tbody> und <tfoot> und </tfoot> Den Vorteil dieser Funktion erklärt sich beim Ausprobieren bei der Gestaltung von Tabellen von selbst (auch mit CSS). Im Beispiel wird das Ganze ein wenig genauer erklärt:

<table>
  <thead>
    <tr>
      <th>Kopf Spalte 1</th>
      <th>Kopf Spalte 2</th>
      <th>Kopf Spalte 3</th>
      <th>Kopf Spalte 4</th>
      <th>Kopf Spalte 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt 1 Spalte 1</td>
      <td>Inhalt 1 Spalte 2</td>
      <td>Inhalt 1 Spalte 3</td>
      <td>Inhalt 1 Spalte 4</td>
      <td>Inhalt 1 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 2 Spalte 1</td>
      <td>Inhalt 2 Spalte 2</td>
      <td>Inhalt 2 Spalte 3</td>
      <td>Inhalt 2 Spalte 4</td>
      <td>Inhalt 2 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 3 Spalte 1</td>
      <td>Inhalt 3 Spalte 2</td>
      <td>Inhalt 3 Spalte 3</td>
      <td>Inhalt 3 Spalte 4</td>
      <td>Inhalt 3 Spalte 5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Fuß Spalte 1</td>
      <td>Fuß Spalte 2</td>
      <td>Fuß Spalte 3</td>
      <td>Fuß Spalte 4</td>
      <td>Fuß Spalte 5</td>
    </tr>
  </tfoot>
</table>
Anzeigebeispiel
Anzeigebeispiel


Ein wichtiger Punkt bei Tabellen ist die Gestaltung. Dies ist jedoch nicht nur mit CSS möglich sondern auch mit Befehlen in HTML möglich. Wir beginnen mit der ersten Gestaltung: Der Rahmen der Tabelle. Dazu benötigen Sie ein Attribut in dem table-Tag. Mit dem frame-Attribut inklusive dem Wert (gleich mehr dazu) und dem border-Attribut inklusive dem Wert (gleich mehr dazu) können Sie die Rahmeneinstellungen vornehmen. Als Wert für das Attribut frame (Attribut für den Außenrahmen) haben Sie folgende Möglichkeit:

  1. above - Rahmenlinie am oberen Rand der Tabelle
  2. below - Rahmenlinie am unteren Rand der Tabelle
  3. lhs - Rahmenlinie am linken Rand der Tabelle
  4. rhs - Rahmenlinie am rechten Rand der Tabelle
  5. hsides - Rahmenlinie am oberen und am unteren Rand der Tabelle
  6. vsides - Rahmenlinie am linken und am rechten Rand der Tabelle
  7. box - Rahmenlinie am oberen, am unteren, am linken und am rechten Rand der Tabelle
  8. void - keine Rahmenlinie am oberen, am unteren, am linken und am rechten Rand der Tabelle

Mit dem Attribut border können Sie den Rahmen zwischen den Zellen festlegen. Hier noch mal ein Tabellen-Beispiel:

<table border="4" frame="hsides">
  <thead>
    <tr>
      <th>Kopf Spalte 1</th>
      <th>Kopf Spalte 2</th>
      <th>Kopf Spalte 3</th>
      <th>Kopf Spalte 4</th>
      <th>Kopf Spalte 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt 1 Spalte 1</td>
      <td>Inhalt 1 Spalte 2</td>
      <td>Inhalt 1 Spalte 3</td>
      <td>Inhalt 1 Spalte 4</td>
      <td>Inhalt 1 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 2 Spalte 1</td>
      <td>Inhalt 2 Spalte 2</td>
      <td>Inhalt 2 Spalte 3</td>
      <td>Inhalt 2 Spalte 4</td>
      <td>Inhalt 2 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 3 Spalte 1</td>
      <td>Inhalt 3 Spalte 2</td>
      <td>Inhalt 3 Spalte 3</td>
      <td>Inhalt 3 Spalte 4</td>
      <td>Inhalt 3 Spalte 5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Fuß Spalte 1</td>
      <td>Fuß Spalte 2</td>
      <td>Fuß Spalte 3</td>
      <td>Fuß Spalte 4</td>
      <td>Fuß Spalte 5</td>
    </tr>
  </tfoot>
</table>
Anzeigebeispiel
Anzeigebeispiel


Eine weitere Gestaltungsmöglichkeit bei Tabellen ist die Gestaltung der Gitternetzlinien. Um diese Funktion zu nutzen muss sowohl das hier beschriebene rules-Attribut, als auch das border-Attribut (mit dem Wert 1) gesetzt werden. Für den Inhalt des rules-Attribut gibt es folgende mögliche Werte:

  1. all - Gitternetzlinien zwischen den Zeilen und den Spalten
  2. rows - Gitternetzlinien zwischen den Zeilen
  3. cols - Gitternetzlinien zwischen den Spalten
  4. groups - Gittnetzlinien zwischen dem Tabellen-Kopf, dem Tabellen-Körper und dem Tabellen-Fuß (waagrechte Linien)
  5. none - keine Gitternetzlinien
<table border="4" rules="cols">
  <thead>
    <tr>
      <th>Kopf Spalte 1</th>
      <th>Kopf Spalte 2</th>
      <th>Kopf Spalte 3</th>
      <th>Kopf Spalte 4</th>
      <th>Kopf Spalte 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt 1 Spalte 1</td>
      <td>Inhalt 1 Spalte 2</td>
      <td>Inhalt 1 Spalte 3</td>
      <td>Inhalt 1 Spalte 4</td>
      <td>Inhalt 1 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 2 Spalte 1</td>
      <td>Inhalt 2 Spalte 2</td>
      <td>Inhalt 2 Spalte 3</td>
      <td>Inhalt 2 Spalte 4</td>
      <td>Inhalt 2 Spalte 5</td>
    </tr>
    <tr>
      <td>Inhalt 3 Spalte 1</td>
      <td>Inhalt 3 Spalte 2</td>
      <td>Inhalt 3 Spalte 3</td>
      <td>Inhalt 3 Spalte 4</td>
      <td>Inhalt 3 Spalte 5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Fuß Spalte 1</td>
      <td>Fuß Spalte 2</td>
      <td>Fuß Spalte 3</td>
      <td>Fuß Spalte 4</td>
      <td>Fuß Spalte 5</td>
    </tr>
  </tfoot>
</table>
Anzeigebeispiel
Anzeigebeispiel


Vielen ist es wichtig, die Breite und Höhe einer Tabelle (prozentual oder fest) festlegen zu können. Dazu benötigt man das Breiten-Attribut (width) und das Höhen-Attribut (height). Die Attributen können entweder in dem table-Tag oder dem th-Tag bzw. td-Tag eingesetzt werden. Manche unterstützen diese Attribute auch in dem tr-Tag. Alternativ zu diesen Methoden kann auch CSS benutzt werden (empfohlen laut W3C). Hier ein paar Beispiele:

<table>
  <tr>
    <th width="100px" height="50px">Kopf Spalte 1</th>
    <th width="100px" height="50px">Kopf Spalte 2</th>
    <th width="100px" height="50px">Kopf Spalte 3</th>
    <th width="100px" height="50px">Kopf Spalte 4</th>
    <th width="100px" height="50px">Kopf Spalte 5</th>
  </tr>
  <tr>
    <td width="100px">Inhalt 1 Spalte 1</td>
    <td width="100px">Inhalt 1 Spalte 2</td>
    <td width="100px">Inhalt 1 Spalte 3</td>
    <td width="100px">Inhalt 1 Spalte 4</td>
    <td width="100px">Inhalt 1 Spalte 5</td>
  </tr>
  <tr>
    <td width="100px">Inhalt 2 Spalte 1</td>
    <td width="100px">Inhalt 2 Spalte 2</td>
    <td width="100px">Inhalt 2 Spalte 3</td>
    <td width="100px">Inhalt 2 Spalte 4</td>
    <td width="100px">Inhalt 2 Spalte 5</td>
  </tr>
  <tr>
    <td width="100px">Inhalt 3 Spalte 1</td>
    <td width="100px">Inhalt 3 Spalte 2</td>
    <td width="100px">Inhalt 3 Spalte 3</td>
    <td width="100px">Inhalt 3 Spalte 4</td>
    <td width="100px">Inhalt 3 Spalte 5</td>
  </tr>
</table>
Anzeigebeispiel
Anzeigebeispiel


Die letzte Gestaltungsmöglichkeit, die wir hier vorstellen, ist die Hintergrundfarbe. Dazu ist nur ein kleines Attribut notwendig: "bgcolor" Als Inhalt können Sie englische Worte (blue, red, ...) oder HEX-Dezimal-Werte (#0000FF, #FF0000, ...) verwenden. Das Attribut kann in den table-Tag, in den tr-Tag und in den th-Tag bzw. td-Tag eingesetzt werden. Mit CSS können Sie auch Hintergrundgrafiken verwenden. Hier ein Beispiel mit HTML:

<table>
  <tr bgcolor="#D2D2D2">
    <th>Kopf Spalte 1</th>
    <th>Kopf Spalte 2</th>
    <th>Kopf Spalte 3</th>
    <th>Kopf Spalte 4</th>
    <th>Kopf Spalte 5</th>
  </tr>
  <tr>
    <td bgcolor="red">Inhalt 1 Spalte 1</td>
    <td bgcolor="red">Inhalt 1 Spalte 2</td>
    <td bgcolor="red">Inhalt 1 Spalte 3</td>
    <td bgcolor="red">Inhalt 1 Spalte 4</td>
    <td bgcolor="red">Inhalt 1 Spalte 5</td>
  </tr>
  <tr>
    <td bgcolor="blue">Inhalt 2 Spalte 1</td>
    <td bgcolor="yellow">Inhalt 2 Spalte 2</td>
    <td bgcolor="blue">Inhalt 2 Spalte 3</td>
    <td bgcolor="yellow">Inhalt 2 Spalte 4</td>
    <td bgcolor="blue">Inhalt 2 Spalte 5</td>
  </tr>
  <tr>
    <td bgcolor="#00FF00">Inhalt 3 Spalte 1</td>
    <td bgcolor="#00FF00">Inhalt 3 Spalte 2</td>
    <td bgcolor="#00FF00">Inhalt 3 Spalte 3</td>
    <td bgcolor="#00FF00">Inhalt 3 Spalte 4</td>
    <td bgcolor="#00FF00">Inhalt 3 Spalte 5</td>
  </tr>
</table>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de