Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
kurz & gut:
Wie Tabellen erstellt und einzelne Zellen verbunden werden.

HTML Tabellen - Grundlagen

Wie kam früher das Design auf Websites

Sicher haben Sie sich bisher schon gefragt, wie kam das Design früher ohne CSS auf Websites? - Normalerweise über Tabellen, die unsichtbar gemacht wurden. 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 einfacheren 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:

  1. <table>
  2. <tr>
  3. <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 Navigator (gibt es nicht mehr, aber hier ein gutes Beispiel) gar nichts angezeigt hatte.

<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 also Inhalt in unsere Tabelle ein:

<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.

Für den Rahmen müssen wir noch mit dem veralteten Attribut border="1" arbeiten, da wir bisher noch kein Design über CSS kennen gelernt haben. Lassen wir unseren Quellcode validieren, erhalten wir wegen diesem Attribut eine Warnung bzw. Fehlermeldung. Vollständigkeitshalber: in CSS wird später die Anweisung für den Rahmen dann folgenden CSS-Code haben: table, td, th { border: 1px solid orange; }

<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 ZELLE 1 INHALT ZELLE 2
INHALT ZELLE 3 INHALT ZELLE 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">

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe