Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen
kurz & gut:
Wie werden Tabellen erstellt und einzelne Zellen verbunden.

HTML Tabellen - Grundlagen

Wie kam früher das Design auf Homepages

Sicher haben Sie sich bisher schon gefragt, wie kam das Design früher ohne CSS auf Homepages? - Normalerweise über Tabellen, die unsichtbar sind. Dazu später mehr. Nun erstmals zu Tabellen, die sichtbar sind und damit einfacher zu verstehen.

HTML Tabellen werden auch heute noch angewendet, wenn die Inhalte sinnvoll in Tabellen dargestellt werden können, sprich wenn man auch im normalen Alltag eine Tabelle dafür hernehmen würde. Z.B. für Fahrpläne usw. - HTML Tabellen werden bei aktuellem HTML-Einsatz nicht mehr für Design genutzt!

Bestandteile einer Tabelle - Tabellenaufbau

Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun schrittweise aufbauen (zum besseren Verständnis) bis hin zur kompletten Tabelle.

Für eine Tabelle werden auf jeden Fall 3 verschiedene HTML-TAGs benötigt. Diese HTML-Befehle sind:

  • <table>
  • <tr>
  • <td>

Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle an und mit dem entsprechenden END-TAG hört diese auf. Wichtig ist, dass beide gesetzt werden, da zwar bei fehlendem END-TAG der IE die halbfertige Tabelle anzeigt, dagegen der Netscape u.U. je nach Version gar nichts anzeigt.

<table>
</table>

Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl der Zeilen angegeben wurde.

Tabellenzeile erstellen - <tr>

Als nächsten Schritt legen wir eine Zeile mit <tr> an. Das tr steht für engl. table row = Tabellen Reihe

<table>
  <tr>
  </tr>
</table>

Wie viele Zellen in der Tabellenzeile angezeigt werden, wird über den nun folgenden HTML-Befehl bewirkt.

Tabellenzelle erstellen

Auch jetzt wird noch nichts angezeigt - es fehlen die Tabellendatenzellen - also der HTML-TAG <td>, das für das engl. table data = Tabellen Daten steht

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

Inhalt in Tabelle

Auch jetzt wird noch herzhaft wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in unsere Tabelle:

<table>
  <tr>
    <td>
      Inhalt 1
    </td>
  </tr>
</table>
INHALT 1

Rahmen der Tabelle anzeigen

Irgendwie sieht es auch noch nicht anders aus als unsere bisherigen HTML-Seiten - also soll der Rahmen der Tabelle noch angezeigt werden.

<table border="1">
  <tr>
    <td>
      Inhalt 1
    </td>
  </tr>
</table>
INHALT 1

Und nun kommen noch mehr Spalten in Form von <td> hinzu

<table border="1">
  <tr>
    <td>
      Inhalt 1
    </td>
    <td>
      Inhalt 2
    </td>
  </tr>
</table>
INHALT 1 INHALT 2

So, das gleiche mit noch mehr Zeilen - beides kann nach Belieben variiert werden.

<table border="1">
  <tr>
    <td> INHALT ZELLE 1  </td>
    <td> INHALT ZELLE 2  </td>
  </tr>
  <tr>
    <td> INHALT ZELLE 3  </td>
    <td> INHALT ZELLE 4  </td>
  </tr>
</table>
INHALT 1 INHALT 2
INHALT 3 INHALT 4

So sollte ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die einzelnen Zellen verdeutlichen.

Tipp: zum Fehler bei Tabellen vermeiden

Wegen der Übersichtlichkeit und um Probleme zu umgehen, sollte besonders bei Tabellen auf sauberen Code geachtet werden. Also auf jeden Fall mit Einrückungen zur besseren Übersicht arbeiten!

Beim Arbeiten mit Tabellen sollten Sie die einzelnen Zellen anfangs am besten durchnummerieren und beim HTML-TAG table zugleich auch das Attribut border setzen, also: <table border="1">

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de