<td> HTML Table-Datensatz-Zellenelement

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Attribute

Dieses Element enthält die globalen Attribute.

colspan

Enthält einen nicht-negativen ganzzahligen Wert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte höher als 1000 als inkorrekt und setzen den Standardwert (1).

headers

Enthält eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem id-Attribut der <th> Elemente entsprechen, die Überschriften für diese Tabellenzelle bereitstellen.

rowspan

Enthält einen nicht-negativen ganzzahligen Wert, der angibt, für wie viele Zeilen die Datenzelle überspannt oder erweitert wird. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt er sich bis zum Ende des Tabellenabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem die Zelle gehört. Werte höher als 65534 werden auf 65534 begrenzt.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind nur zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

abbr

Enthält eine kurze abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Sprachleser, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren. Setzen Sie den abgekürzten Inhalt innerhalb der Zelle und die (längere) Beschreibung im title Attribut, da dieses Attribut veraltet ist. Oder, vorzugsweise, schließen Sie den Inhalt in die Datenzelle ein und verwenden Sie CSS, um überschüssigen Text visuell zu kürzen.

align

Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem Zeichen aus, das im char Attribut definiert ist, und dem Offset, das im charoff Attribut definiert ist. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis

Enthält eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem id-Attribut einer Gruppe von Zellen entsprechen, auf die die Datenzelle zutrifft.

bgcolor

Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, präfixiert durch ein #, oder ein Farb-Schlüsselwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Hat keine Funktion. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. Typische Werte hierfür beinhalten einen Punkt (.) bei dem Versuch, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, die der Inhalt der Datenzelle von dem im char Attribut spezifizierten Ausrichtungszeichen versetzt sein soll.

height

Definiert eine empfohlene Höhe der Datenzelle. Verwenden Sie stattdessen die height CSS-Eigenschaft, da dieses Attribut veraltet ist.

scope

Definiert die Zellen, auf die sich die Kopfzeile (definiert im <th>) Element bezieht. Die möglichen aufzählbaren Werte sind row, col, rowgroup, und colgroup. Verwenden Sie dieses Attribut nur mit dem <th> Element, um die Zeile oder Spalte zu definieren, für die es eine Kopfzeile ist, da dieses Attribut für das <td> Element veraltet ist.

valign

Gibt die vertikale Ausrichtung der Datenzelle an. Die möglichen aufzählbaren Werte sind baseline, bottom, middle, und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

width

Definiert eine empfohlene Breite der Datenzelle. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Nutzungshinweise

• Das <td> darf nur innerhalb eines <tr> Elements verwendet werden.

• Wenn die colspan und rowspan Attribute verwendet werden, um Datenzellen über mehrere Spalten und Zeilen zu überspannen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in die freien verfügbaren Räume innerhalb der Tabellenstruktur eingefügt, die 1x1 Zellen spannen, wie in der folgenden Abbildung veranschaulicht:

  

  Hinweis: Diese Attribute dürfen nicht verwendet werden, um Zellen zu überlappen.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und bewährte Verfahren einführt.

Grundlegende Datenzellen

Dieses Beispiel verwendet <td> Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine grundlegende Tabelle mit Daten zum phonetischen Alphabet einzuführen.

HTML

Einige Tabellenzeilen (<tr> Elemente) enthalten sowohl Kopfzellen (<th> Elemente) als auch Datenzellen <td> Elemente. Das <th> Element, das das erste Kind jeder Zeile ist, bildet die erste Spalte der Tabelle, wobei jedes <th> die Zeilenüberschrift für die Datenzellen in dieser Zeile bereitstellt. Jedes entsprechende <td> Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Zeilenüberschrift ausgerichtet sind.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Einige grundlegende CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. CSS Attributselektoren und die :nth-of-type Pseudoklasse werden verwendet, um das Erscheinungsbild der Zellen abzuwechseln und die Informationen in der Tabelle einfacher verständlich und identifizierbar zu machen.

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Ergebnis

Spannen von Spalten und Zeilen

Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorherigen Beispiel durch das Hinzufügen einer zusätzlichen "ABC"-Zelle.

HTML

Eine zusätzliche Datenzelle (<td> Element) wird in der ersten Zeile (<tr> Element) eingeführt. Dies schafft eine vierte Spalte in der Tabelle.

Mithilfe des rowspan Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle gespannt. Die letzten Datenzellen der nachfolgenden Zeilen spannen jeweils zwei Spalten. Dies geschieht mit dem colspan Attribut, wodurch sie korrekt innerhalb der Tabellenstruktur ausgerichtet werden. Beachten Sie, dass eine zusätzliche Zeile (<tr> Element) zur Tabelle hinzugefügt wird, um dies zu veranschaulichen.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

Die :first-of-type und :last-of-type Pseudoklassen werden im CSS verwendet, um die hinzugefügte "ABC"-Datenzelle auszuwählen und zu gestalten.

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  font-weight: bold;
  text-align: center;
}

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Ergebnis

Datenzellen mit Kopfzellen verknüpfen

Für komplexere Beziehungen zwischen Datenzellen (<td> Elemente) und Kopfzellen (<th> Elemente) kann die Verwendung von <th> Elementen mit dem scope Attribut allein für unterstützende Technologien, insbesondere Bildschirmleser, nicht ausreichen.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und es Bildschirmlesern beispielsweise zu ermöglichen, die Überschriften, die mit jeder Datenzelle verknüpft sind, zu sprechen, kann das headers Attribut zusammen mit id Attributen eingeführt werden. Jede Zeilenkopfzelle (<th> Element), die mit der "ABC" Datenzelle verknüpft ist, also die Buchstaben "A", "B", und "C", erhält eine eindeutige Kennung mit dem id Attribut. Die "ABC" Datenzelle (<td> Element) verwendet dann diese id Werte in einer durch Leerzeichen getrennten Liste für das headers Attribut.

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

Ergebnis

Während das visuelle Ergebnis unverändert gegenüber der vorherigen Beispieltabelle bleibt, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Datenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Datenzellen
• height: CSS-Eigenschaft zur Steuerung der empfohlenen Datenzellenhöhe
• text-align: CSS-Eigenschaft, um den Inhalt jeder Datenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Datenzelle vertikal auszurichten
• width: CSS-Eigenschaft zur Steuerung der empfohlenen Datenzellenbreite
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Datenzellen auszuwählen