Informationen für eigene Internetaktivitäten.  
Ein HTML-Kurs
Lernen Sie die Grundlagen der Seitenerstellung kennen. Schritt für Schritt zur eigenen Homepage.
 
  • Überblick
  • Grundgerüst
  • Farbe
  • Textauszeichnungen
  • Textgestaltung
  • Aufzählungen
  • Verknüpfungen
  • Bilder
  • GIF-Animationen
  • Tabellen
  • Werkzeuge
  • Internetnamen
  • Weitere Quellen
     
  • Internetname
    Reservieren Sie Ihren eigenen Internetnamen. Meiner jüngsten Tochter gehört zum Beispiel der Name lea-becker.de.
    Der eigene Internetname kann ein schönes Geschenk von bleibendem Wert für die Kinder und Enkelkinder sein.

     
    Referenzen
    Besuchen Sie Seiten unserer Internetkunden.

     
    Auszeichnungen
    Klappern gehört zum Handwerk.

     
    Impressum
    Hier finden Sie unsere Kontaktdaten sowie etwas zum Lesen für die Juristen.

     
    Weitere Sites
  • helpmaster.com
  • cbtmaster.org
  • paintmaster.de
  • appletmaster.de
  • hypermaster.de
     
  •  
    HTML - Schritt für Schritt
     
    Tabellen sind eines der wichtigsten Gestaltungsmittel für Webseiten. Texte und Bilder können fast beliebig auf der Seite angeordnet werden. Ohne Tabellen wäre dies nicht machbar.
     
    Wichtig ist, dass Tabellen nicht zu lang werden. Die bekannten Browser zeigen Tabellen erst an, wenn die Tabelleninhalte über die Leitung eingetroffen sind. Bei Texten ist das nicht weiter schlimm. Aber bei Bildern die ohne Größenangaben eingefügt wurden. Der arme Surfer wartet und wartet und ... nein, noch länger wartet er nicht. Er verläßt die Seite.
     

    Seitengestaltung mit Tabellen
     
    Es hat einen Grund, warum die so wichtigen Tabellen erst jetzt behandelt werden. Es ist ein sehr komplexes Thema. Mit dem Einsatz von Tabellen erschließen sich sehr viele Gestaltungsmöglichkeiten. Der Preis dafür: Sie müssen diese Möglichkeiten kennen und nutzen können.
     
    Nur zur Erinnerung, der Grundaufbau jeder HTML-Seite sieht wie folgt aus:
     
    <html>
    <head>
    <title>
    Ein aussagefähiger Seitentitel</title>
    </head>
    <body>
     
    </body>
    </html>

     
    Die HTML-Tags mit den Seiteninhalten werden zwischen den beiden body-Tags eingefügt.
     
     
    Die Grundstruktur einer Tabelle
     
    Schon die kleinstmögliche Tabelle benutzt mindestens drei verschiedene Tags. Zunächst wird das Tagpaar zur Kennzeichnung von Anfang und Ende einer Tabelle benötigt:
     
    <table>
    </table>

     
    Dieses Tagpaar kennzeichnet lediglich Anfang und Ende der Tabelle. Sichtbar ist jetzt noch gar nichts. Denn jede Tabelle benötigt mindestens eine Tabellenzeile (table row). Es wird also das Tagpaar zur Kennzeichnung von Anfang und Ende der Tabellenzeile eingefügt:
     
    <table>
       <tr>
       </tr>
    </table>

     
    Eine Tabllenzeile ist nun zwar vorhanden, zu sehen ist aber immer noch nichts. In der Tabellenzeile muß mindestens eine Zelle (Spalte) für die Aufnahme von Tabellendaten (table data) eingefügt werden:
     
    <table>
       <tr>
          <td>

          Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
          </td>
       </tr>
    </table>

     
    Und so sieht es dann im Browser aus:
     
    Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.

    Damit ganz deutlich wird, dass es sich tatsächlich um eine Tabelle handelt, wird nun das erste Attribut von vielen die noch folgen werden hinzugefügt - ein Rahmen (border).
     
    <table border="4">
       <tr>
          <td>

          Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
          </td>
       </tr>
    </table>

     
    Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.

    Unter einer Tabelle stellt man sich jedoch meistens etwas anderes vor. Die gewohnten Tabellen, beispielsweise Tabellen einer Tabellenkalkulation, haben mehr als eine Zeile und eine Zelle. Hier nun eine Tabelle mit zwei Zeilen die jeweils drei Zellen enthalten:
     
    <table border="4">
       <tr>
          <td>
    1. Zeile, 1. Zelle</td>
          <td>
    1. Zeile, 2. Zelle</td>
          <td>
    1. Zeile, 3. Zelle</td>
       </tr>
       <tr>
          <td>
    2. Zeile, 4. Zelle</td>
          <td>
    2. Zeile, 5. Zelle</td>
          <td>
    2. Zeile, 6. Zelle</td>
       </tr>
    </table>

     
    1. Zeile, 1. Zelle 1. Zeile, 2. Zelle 1. Zeile, 3. Zelle
    2. Zeile, 4. Zelle 2. Zeile, 5. Zelle 2. Zeile, 6. Zelle

     

     
    Abmessungen der Tabelle
     
    Im vorherigen Beispiel waren Tabelle und Tabellenzellen gerade einmal groß genug, um die Tabellendaten aufzunehmen. Die Größe kann jedoch mit Attributen gesteuert werden.
     
    <table border="4" width="100%">
       <tr>
          <td>

          Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
          </td>
       </tr>
    </table>

     
    Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.

    Im Beispiel nimmt die Tabelle die gesamte zur Verfügung stehende Breite (100%) ein. Das folgende Beispiel zeigt eine Tabelle, die nur 25% der zur Verfügung stehenden Breite einnehmen soll.
     
    <table border="4" width="25%">
       <tr>
          <td>

          Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.
          </td>
       </tr>
    </table>

     
    Nur Tabellenzellen sind zur Aufnahme von Tabellendaten geeignet.

    Enthält eine Tabelle mehrere Zellen, kann die Breite der einzelnen Spalten in der gleichen Weise beeinflußt werden.
     
    <table border="4" width="100%">
       <tr>
          <td width="50%">
    1. Zeile, 1. Zelle</td>
          <td>
    1. Zeile, 2. Zelle</td>
          <td>
    1. Zeile, 3. Zelle</td>
       </tr>
       <tr>
          <td>
    2. Zeile, 4. Zelle</td>
          <td>
    2. Zeile, 5. Zelle</td>
          <td>
    2. Zeile, 6. Zelle</td>
       </tr>
    </table>

     
    1. Zeile, 1. Zelle 1. Zeile, 2. Zelle 1. Zeile, 3. Zelle
    2. Zeile, 4. Zelle 2. Zeile, 5. Zelle 2. Zeile, 6. Zelle

    Auch die Höhe einer Zelle kann eingestellt werden. Genauso wie von der Breitenangabe die gesamte Spalte betroffen war, ist von der Höhenangabe die gesamte Zeile betroffen.
     
    <table border="4" width="100%">
       <tr>
          <td width="50%">
    1. Zeile, 1. Zelle</td>
          <td>
    1. Zeile, 2. Zelle</td>
          <td>
    1. Zeile, 3. Zelle</td>
       </tr>
       <tr>
          <td height="100">
    2. Zeile, 4. Zelle</td>
          <td>
    2. Zeile, 5. Zelle</td>
          <td>
    2. Zeile, 6. Zelle</td>
       </tr>
    </table>

     
    1. Zeile, 1. Zelle 1. Zeile, 2. Zelle 1. Zeile, 3. Zelle
    2. Zeile, 4. Zelle 2. Zeile, 5. Zelle 2. Zeile, 6. Zelle

    Breitenangaben können relativ (%) oder absolut angegeben werden. Der Wert 100% bedeutet 100% der zur Verfügung stehenden Breite, der Wert 100 ohne Zusatz bedeutet 100 Pixel.
     
    Höhenangaben können nur absolut angegeben werden. Möglich ist nur die Eingabe einer Zahl ohne Zusatz.
     

     
    Ausrichtung der Tabellendaten
     
    Auf Zellebene kann angegeben werden, wo die Inhalte der Zelle angezeigt werden sollen: links, rechts, zentriert, oben, unten.
     
    <table border="1" width="100%">
       <tr>
          <td width="33%" height="100" align="center" valign="bottom">
    1. Zeile, 1. Zelle</td>
          <td width="33%">
    1. Zeile, 2. Zelle</td>
          <td>
    1. Zeile, 3. Zelle</td>
       </tr>
       <tr>
          <td height="100" align="left" valign="top">
    2. Zeile, 4. Zelle</td>
          <td>
    2. Zeile, 5. Zelle</td>
          <td align="center" valign="top">
    2. Zeile, 6. Zelle</td>
       </tr>
    </table>

     
    1. Zeile, 1. Zelle 1. Zeile, 2. Zelle 1. Zeile, 3. Zelle
    2. Zeile, 4. Zelle 2. Zeile, 5. Zelle 2. Zeile, 6. Zelle

     
     
    htmlmaster.de © 2002 helpmaster.de GmbH, Usastraße 46, 61267 Neu-Anspach, Tel. 06081-94080