HTML tr-Tag für Tabellenzeilen

Zeile für die Datentabelle

Damit eine Tabelle funktionieren kann, braucht es Zeilen und Spalten. Diese Struktur ist natürlich auch erforderlich, wenn eine Tabelle in ein HTML-Dokument, also beispielsweise in eine Webseite integriert werden soll, damit der Browser weiß, wie die Daten darzustellen sind, welche Daten zu welchem Bereich gehören und vieles mehr.

Der table-Tag gibt die Tabelle vor und mit dem tr-Tag legt man die benötigten Zeilen an, die mit dem eigentlichen Inhalt mit Hilfe der td-Tags gefüllt werden.

tr-Tag sorgt in HTML für neue Zeilen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Das Beispiel zeigt, dass mit table die Tabelle begonnen wird und dann folgt der tr-Tag mit der ersten und in dem Fall einzigen Zeile. Zwei Zellen (oder Spalten) folgen mit der td-Anweisung und dann wird mit /tr die Zeile abgeschlossen.

Der für die Tabellenzeile zuständige HTML-Befehl ist der tr-Tag. Die Abkürzung TR steht dabei für "Table Row", also für Tabellenzeile. Mit dem tr-Tag kündigt man eine neue Tabellenzeile an, in der sich dann die entsprechenden Zellen, die die Spalten repräsentieren, befinden. So kann die Tabelle durch die HTML-Befehle Zeile für Zeile abgearbeitet bzw. im Vorfeld natürlich auch aufgebaut und programmiert werden.

Der tr-Tag ist aber nicht nur dazu da, die Tabellenzeile anzukündigen, er kann auch als gestalterisches Element eingesetzt werden. Die drei wichtigsten Funktionen, die der tr-Tag beherrscht, sind die vertikale und die horizontale Ausrichtung sowie die Hintergrundfarbe.

Von HTML zu CSS

Durch den Zusatz align kann bestimmt werden, wie die Zeile horizontal ausgerichtet werden soll. Das kann linksbündig (left), rechtsbündig (right), zentriert (center) sein, aber auch der Blocksatz ist möglich (justify). Der Zusatz valign ist für die Ausrichtung der vertikalen Position zuständig. Wenn man den Wert auf top setzt, dann richtet sich der Inhalt der Zeile an den oberen Rand der Zeile aus, bei bottom passiert genau das Gegenteil und die Inhalte befindet sich am unteren Rand der Zeile. Middle ist die Mittelposition, dazu gibt es noch die Option Baseline.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Mit bgcolor kann man die Hintergrundfarbe bestimmen. So ist es möglich, durch dynamische Programmierung eine abwechselnde Hintergrundfarbe zu erzeugen, wodurch die Tabelle, vor allem wenn sie länger wird, übersichtlicher erscheint.

Doch all diese zusätzlichen Parameter werden heute nicht mehr via HTML definiert, sondern im CSS-Dokument eingearbeitet. Mit CSS kann man mit einem Schlag alle Tabellen einer Webseite umändern, wenn dies nötig sein sollte. Und man braucht nicht verschiedenste Parameter als Zusätze, sondern definiert in der CSS-Datei alle Spezifikationen wie etwa auch Abstände zum Rahmen, Abstand zwischen den Zeilen und vieles mehr.

Lesen Sie auch

So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

Themenseiten

Startseite HTML-Grundlagen

HTML tr-Tag für Tabellenzeilen

Zeile für die Datentabelle

tr-Tag sorgt in HTML für neue Zeilen

Von HTML zu CSS

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich