Tabellen

Bevor wir Daten anzeigen, müssen wir zunächst mithilfe des <table> Elements die Tabelle erstellen, die die Daten enthalten wird.

In vielen Programmen, die Tabellen verwenden, ist die Tabelle bereits für Sie vordefiniert. Dies bedeutet, dass sie die Zeilen, Spalten und Zellen enthält die Daten enthalten. In HTML müssen alle diese Komponenten erstellt werden.

Der erste Schritt beim Eingeben von Daten in die Tabelle besteht darin, Zeilen mithilfe des <tr> Tabellenzeilenelements hinzuzufügen: 

Zeilen reichen nicht aus, um Daten zu einer Tabelle hinzuzufügen. Jedes Zellenelement muss ebenfalls definiert werden. In HTML können Sie Daten mit dem <td> Tabellendatenelement hinzufügen:

Tabellendaten ergeben ohne Titel, die beschreiben, was die Daten darstellen, nicht viel Sinn.

Um Zeilen und Spalten Titel hinzuzufügen, können Sie das Tabellenüberschriftelement <th> verwenden:

Das Tabellenüberschriftelement wird wie ein Tabellendatenelement verwendet, allerdings mit einem entsprechenden Titel. Genau wie Tabellendaten muss eine Tabellenüberschrift in einer Tabellenzeile platziert werden.

Was ist im obigen Code passiert?

Zunächst wurde eine neue Zeile hinzugefügt, die drei Überschriften enthält: eine leere Überschrift, eine Samstag Überschrift und eine Sonntag Überschrift. Die leere Überschrift erstellt die zusätzliche Tabellenzelle, die erforderlich ist, um die Tabellenüberschriften korrekt über den entsprechenden Daten auszurichten.

In der zweiten Zeile wurde eine Tabellenüberschrift als Zeilentitel hinzugefügt: Temperatur

Nach der Darstellung sieht der Code etwa wie in der Abbildung unten aus:

Bisher ist die Tabelle die Sie erstellt haben etwas schwer zu lesen, da sie keine Ränder hat.

In älteren HTML-Versionen konnte ein Rahmen zu einem Tisch hinzugefügt werden und mit dem border Attribut zu einem Integer (ganze Zahl) setzen.

Der Code im obigen Beispiel ist veraltet, verwenden Sie ihn also bitte nicht. Er soll ältere Konventionen veranschaulichen, auf die Sie beim Lesen des Codes anderer Entwickler stoßen können.

Der Browser interpretiert Ihren Code wahrscheinlich immer noch richtig, wenn  Sie das border Attribut verwenden. Das bedeutet jedoch nicht, dass das Attribut verwendet werden sollte.

Wir verwenden CSS, um HTML-Dokumenten Stil zu verleihen, da es uns hilft, die Struktur einer Seite von ihrem Erscheinungsbild zu trennen.

Den gleichen Tabellenrahmeneffekt können Sie mit CSS erzielen.

Was wäre, wenn das table Element Daten enthält, die sich über mehrere Spalten erstrecken?

Ein persönlicher Kalender könnte beispielsweise Ereignisse enthalten, die sich über mehrere Stunden oder sogar mehrere Tage erstrecken.

Daten können sich über mehrere Spalten erstrecken, mit dem colspan Attribut. Das Attribut akzeptiert eine Ganzzahl (größer oder gleich 1), um die Anzahl der Spalten anzugeben, über die es sich erstreckt.

Daten können sich auch über mehrere Zeilen erstrecken mit dem rowspan Attribut.

Das rowspan Attribut wird für Daten verwendet, die sich über mehrere Zeilen erstrecken (beispielsweise dauert ein Ereignis an einem bestimmten Tag mehrere Stunden). Es akzeptiert eine Ganzzahl (größer oder gleich 1), um die Anzahl der Zeilen anzugeben, über die es sich erstrecken soll.

Mit der Zeit kann eine Tabelle sehr viele Daten enthalten und sehr lange werden. In diesem Fall kann die Tabelle unterteilt werden, damit sie leichter zu verwalten ist.

Lange Tabellen können mit dem Tabellenkörperelement unterteilt werden: <tbody>.

Das <tbody> Element sollte alle Daten der Tabelle enthalten, mit Ausnahme der Tabellenüberschriften.

In der letzen Übung wurden die Überschriften der Tabelle im Tabellenkörper gehalten. Wenn der Tabellenkörper jedoch abgetrennt wird, ist es auch sinnvoll, die Spaltenüberschriften der Tabelle mithilfe des <thead> Elements abzutrennen.

Auch der untere Teil eines langen Tisches lässt sich mit dem Element abtrennen <tfoot>.

Tabellen sind standardmäßig sehr langweilig. Sie haben keine Ränder, die Schriftfarbe ist schwarz und die Schriftart ist dieselbe.

CSS oder Cascading Style Sheets ist eine Sprache, die Webentwickler verwenden, um den HTML-Inhalt einer Webseite zu formatieren. Sie können CSS verwenden, um Tabellen zu formatieren. Insbesondere können Sie die verschiedenen oben genannten Aspekte formatieren.