HTML <table><td>: Erstellen und Verwenden von Tabellendatenzellen

Syntax und Verwendung von

Das <td>-Element (Tabellendatenzelle) wird verwendet, um einzelne Datenzellen in einer HTML-Tabelle zu erstellen. Es ist ein untergeordnetes Element von <tr> (Tabellenzeile) und muss immer innerhalb eines <tr>-Elements verschachtelt werden.

Die Syntax für das <td>-Element lautet wie folgt:

<td>Inhalt der Datenzelle</td>

Du kannst die folgenden Inhalte in ein <td>-Element einfügen:

• Text
• Bilder
• Links
• Formulare
• Andere HTML-Elemente

<td>-Elemente können auch mit Attributen versehen werden, um ihr Aussehen und Verhalten zu ändern. Weitere Informationen zu Attributen findest du im Abschnitt "Attribute für <td>".

Verschachteln von <td>-Elementen

Du kannst <td>-Elemente innerhalb anderer <td>-Elemente verschachteln, um komplexere Tabellenlayouts zu erstellen. Allerdings solltest du die Verschachtelungstiefe begrenzen, um die Lesbarkeit des Codes zu gewährleisten.

Verwendung von <td> zur Datenorganisation

<td>-Elemente sind nützlich, um Daten in einer strukturierten Weise zu organisieren. Du kannst sie verwenden, um Informationen in Zeilen und Spalten zu unterteilen und Beziehungen zwischen Datenpunkten zu zeigen.

Ausrichtung und Stilisierung von <td>

Du kannst die Ausrichtung und den Stil deiner <td>-Elemente mithilfe von CSS steuern. Du kannst zum Beispiel die Schriftgröße, Schriftfamilie, Hintergrundfarbe und Textfarbe ändern. Weitere Informationen zur Stilisierung von <td>-Elementen findest du im Abschnitt "Ausrichtung und Stilisierung von <td>".

Attributes für

Zusätzlich zu den allgemeinen HTML-Attributen unterstützt das

-Element spezifische Attribute, die sein Erscheinungsbild und Verhalten anpassen:

colspan

Das Attribut colspan gibt die Anzahl der Spalten an, über die eine Zelle horizontal expandiert. Dies ermöglicht dir, größere Zellen zu erstellen, die mehrere Spalten überspannen.

Erfahre mehr unter: HTML-Code: Grundlagen für Webentwickler

rowspan

Ähnlich wie colspan gibt rowspan die Anzahl der Zeilen an, über die eine Zelle vertikal expandiert. Dies ermöglicht die Erstellung größerer Zellen, die sich über mehrere Zeilen erstrecken.

headers

Das Attribut headers verknüpft eine Zelle mit einem oder mehreren anderen Zellen, die Kopfzellen für die aktuelle Zelle darstellen. Dies ermöglicht es Bildschirmlesegeräten und anderen assistiven Technologien, die Beziehungen zwischen Zellen zu verstehen.

align

Das Attribut align richtet den Inhalt einer Zelle horizontal aus. Mögliche Werte sind:

• left
• right
• center
• justify

valign

Das Attribut valign richtet den Inhalt einer Zelle vertikal aus. Mögliche Werte sind:

• top
• middle
• bottom
• baseline

width

Das Attribut width legt eine feste Breite für die Zelle in Pixel oder Prozent fest.

height

Das Attribut height legt eine feste Höhe für die Zelle in Pixel oder Prozent fest.

bgcolor

Das Attribut bgcolor legt die Hintergrundfarbe der Zelle fest.

Verschachteln von -Elementen

Wenn du komplexere Tabellenstrukturen erstellen möchtest, kannst du

-Elemente verschachteln. Durch das Verschachteln von Tabellen kannst du hierarchische Daten organisieren und komplexe Layouts erstellen.

Ebenen von Tabellen verschachteln

Du kannst mehrere Ebenen von Tabellen verschachteln, indem du ein

<table>
  <tr>
    <td>Ebene 1, Zelle 1</td>
    <td>Ebene 1, Zelle 2</td>
    <td><table>
      <tr>
        <td>Ebene 2, Zelle 1</td>
        <td>Ebene 2, Zelle 2</td>
      </tr>
    </table></td>
  </tr>
</table>

Verschachtelung innerhalb von Zellen

Du kannst

<table>
  <thead>
    <tr>
      <td>Produktname</td>
      <td>Preis</td>
      <td>Menge</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>iPhone 14</td>
      <td>$999</td>
      <td>1</td>
    </tr>
    <tr>
      <td>MacBook Air</td>
      <td>$1,299</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Gesamt</td>
      <td>$2,298</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

Ausrichtung und Stilisierung von

<tr>
  <td>
    Hauptinhalt
    <br>
    <table>
      <tr>
        <td>Unterabschnitt 1</td>
        <td>Unterabschnitt 2</td>
      </tr>
    </table>
  </td>
</tr>

<table>
  <tr>
    <td>Produktname</td>
    <td>Preis</td>
    <td>Menge</td>
  </tr>
  <tr>
    <td>iPhone 14</td>
    <td>$999</td>
    <td>1</td>
  </tr>
  <tr>
    <td>MacBook Air</td>
    <td>$1,299</td>
    <td>1</td>
  </tr>
</table>

<table>
  <tr>
    <td colspan="2">Kunde</td>
    <td colspan="2">Bestellung</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Adresse</td>
    <td>Produkt</td>
    <td>Menge</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>123 Main Street</td>
    <td>iPhone 14</td>
    <td>1</td>
  </tr>
</table>

<table>
  <tr>
    <td>Kategorie</td>
    <td>Unterkategorie</td>
    <td>Produkt</td>
  </tr>
  <tr>
    <td rowspan="2">Elektronik</td>
    <td>Smartphones</td>
    <td>iPhone 14</td>
  </tr>
  <tr>
    <td>Laptops</td>
    <td>MacBook Air</td>
  </tr>
</table>

<table>
  <tr>
    <td text-align="center">Zentriert</td>
    <td text-align="right">Rechtsbündig</td>
  </tr>
</table>

<table>
  <tr>
    <td cellpadding="10">Mit Zellpadding</td>
    <td cellspacing="10">Mit Zellrand</td>
  </tr>
</table>

<table>
  <tr>
    <td background-color="yellow" border="1px solid black">Gelber Hintergrund mit schwarzem Rahmen</td>
  </tr>
</table>

Verwandte Artikel

• HTML-Beispiel: Schritt-für-Schritt-Anleitung zum Erstellen einer grundlegenden Webseite
• th Element in HTML: Erstellen und Verwenden von Tabellenüberschriften
• Das HTML
• -Tag: Die ultimative Anleitung für Listenelemente
• HTML-Dokumente: Fundamente des Webs
• colspan: Verstehen und effektiv nutzen für Tabellen in HTML und CSS
• HTML-Tabellen verbinden: Ein umfassender Leitfaden zum Verknüpfen von Zellen
• HTML-Link-Tag: Der Schlüssel zur Verknüpfung im Web
• HTML-Code-Tag: Das grundlegende Element der Webentwicklung
• Die HTML-Tag-Liste: Alles, was Sie über
• wissen müssen
• Der

  -Tag in HTML: Eine vollständige Anleitung zur Verwendung von Absätzen

• HTML-Dateien: Der unverzichtbare Leitfaden zum Webfundament
• HTML-Bildhöhe: Die umfassende Anleitung zum Anpassen der Bildgröße
• HTML-Formatierung: Ein Leitfaden zur effizienten Erstellung von Webseiten
• HTML-Grundlagen: Alles, was Webentwickler wissen müssen
• HTML-Tabellen ohne Rahmen: Ein umfassender Leitfaden zur Entfernung von Rahmen
• Bilder in HTML einfügen: Eine Schritt-für-Schritt-Anleitung

Folge uns

Neue Posts

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts