Mit dem table-Tag wird die Tabelle mittels HTML für eine Webseite eingeleitet, mit dem tr-Tag werden die Tabellenzellen definiert und dann fehlt noch der td-Tag. td steht dabei für "table data" also für den Inhalt einer Tabelle, konkret für den Inhalt einer Tabellenzelle in einer bestimmten Spalte einer bestimmten Zeile dieser Tabelle.
Der normale Vorgang in einer Datentabelle besteht beispielsweise bei einer Tabelle mit drei Spalten darin, dass mit table-Tag die Tabelle eröffnet wird und für jede Zeile folgt der tr-Tag und ihm folgen drei td-Tags für die drei Zellen ergo Spalten in dieser Zeile. Dann wird die Zeile geschlossen und die nächste Zeile beginnt.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Das Beispiel zeigt eine Demo-Tabelle mit einer Zeile und zwei Spalten. Die Tabelle wird mit dem table-Tag eröffnet und die erste (und in diesem Fall einzige) Zeile mit tr begonnen. Dann folgen zwei Spalten durch die td-Zellen, in denen die eigentliche Information steht.
Der td-Tag ist nicht nur der HTML-Befehl, um Daten in eine Tabelle einzutragen, sondern es gibt auch viele gestalterische Möglichkeiten. Manche haben mit dem Aussehen selbst zu tun, andere sind für die Struktur der Tabelle erforderlich, um flexibel arbeiten zu können.
Bei der Struktur hilft der Zusatz colspan. Würde man im obigen Beispiel colspan=2 in der ersten Zelle td anfügen, dann würden nur noch zwei Zellen ergo Spalten bestehen, denn mit colspan wird ausgedrückt, über wie viele Spalten sich diese Zelle erstreckt. Man könnte auch colspan=3 wählen, um alle drei Spalten zusammenzuführen, aber dann bräuchte man keine Tabelle mehr.
Rowspan ist ein weitere Zusatz für den td-Tag. Mit diesem Attribut kann man bestimmen, über wie viele Zeilen sich die Zelle erstreckt. Auf diese Weise kann man verschiedene Zellen verschiedener untereinander liegender Zellen verbinden und blockweise arbeiten.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Jede Zelle kann mit width in der Breite definiert werden, beispielsweise width=80 bedeutet, dass die Zelle 80 Pixel breit sein soll. Doch bei einer Tabelle richten sich die Zellen ungeachtet der Vorgaben an den breitesten und höchsten Zellen aus, wodurch eine solche Einstellung auch ins Leere gehen kann.
Was für die Breite gilt, gilt demnach auch für height, womit die Zellenhöhe bestimmt werden kann. Hier gilt der Wert der höchsten Zelle. Gibt es drei Zellen und bei einer ist height = 20 eingestellt, dann bleibt height = 16 in einer anderen Zelle wirkungslos.
Mit bgcolor kann man individuelle Hintergrundfarben bestimmen, wobei man aber aus ergonomischen Gründen mit den Farben sinnvoll umgehen sollte. Eine Tabelle mit 20 verschiedenen Hintergrundfarben mag zwar witzig sein, macht aber beispielsweise auf einer Informationsplattform wenig Sinn.
All diese Angaben haben weiterhin Gültigkeit und funktionieren, sind aber nicht ratsam, weil es leichter und besser geht. Denn die Farbe, die Größe und vor allem die Steuerung des Textes mit linksbündig, rechtsbündig, zentriert oder auch Blocksatz steuert man heute nicht mehr über die Parameter beim td-Tag, sondern über CSS und ein externen CSS-Dokument. Damit kann man viele Tabellen einer Webseite gleichzeitig verwalten.
Vor allem kann man auch präzise Darstellungen festlegen, die weit über die HTML-Befehle und zusätzlichen Eigenschaften hinausgehen.
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
Artikel-Thema: Tabellenzelle in HTML mit dem td-Tag anlegen
Beschreibung: Mit Hilfe des 🌍 td-Tag kann man ✅ Zellen in der Tabelle anlegen und den Inhalt einfügen, womit man zu den eigentlichen Informationen gelangt ist.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel