Das Tag <td> wird verwendet, um einheitliche Zellen der HTML-Tabelle zu erstellen. Das Tag muss im Container <tr>, welches die Zeilen der Tabelle bestimmt, platziert werden. Für die Erstellung der oberen Kopfzeile der Tabelle wird das Tag <th> verwendet, voreingestellt wird der Inhalt der Zelle durch fette Schriftart dargestellt und zentriert.

Das Tag <td> kann jedes HTML-Element enthalten: zum Beispiel Text, Form, Bild, Tabelle usw. Voreingestellt wird der Inhalt der Zelle durch einheitliche Schrift dargestellt und nach links ausgerichtet.

Alle Zeilen der Tabelle enthalten dieselbe Anzahl von Zellen, die der Anzahl der Zellen der längsten Zeile entspricht. Wenn eine Zeile weniger Zellen enthält als andere Zeilen, wird der Browser die Zeile automatisch ausfüllen, und leere Zellen am Ende dieser Zeile platzieren.

Wenn Sie betonen müssen, dass die Daten in anderen Zellen fehlen, erstellen Sie leere Zelle an der notwendigen Stelle.

Die vom Browser beigefügten Zellen haben keine Rahmen, und wenn sie sich nacheinander befinden, werden sie in Form einer vereinigten Zelle dargestellt.

Syntax

Das Endtag (</td>) ist nicht obligatorisch.

<table> 
  <tr> 
    <td>...</td> 
  </tr> 
</table>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Monat</th>
        <th>Datum</th>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>März</td>
        <td>10.09.2018</td>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>Juni</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Ergebnis

td beispiel

In diesem Beispiel haben wir die Zeilen der Tabelle durch das Tag <tr>, die Kopfzeile der Zelle durch das Tag <th> und die einheitlichen Zellen durch das Tag <td> erstellt.

Die Attribute colspan und rowspan Attribute werden im Allgemeinen mit dem Tag <td> verwendet, damit sich der Inhalt über mehrere Spalten oder Zeilen erstreckt.

Ein Beispiel mit dem Attribut colspan

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      th, td { 
        padding: 10px; 
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>E-Mail der Gesellschaft</th>
        <th>Datum</th>
      </tr>
      <tr>
        <td style="background-color:#e6ebef;"><a href="#">[email protected]</a></td>
        <td style="background-color:#e6ebef;">01.09.2017</td>
      </tr>
      <tr style="height:60px; background-color:#e6ebef;">
        <td colspan="2" valign="bottom"  style="background-color:#a3cced;">[email protected]; <strong>01.09.2017 </strong><span style="font-size:14px;">(received date)</span></td>
      </tr>
    </table>
  </body>
</html>

Ergebnis

td beispiel

Ein Beispiel mit dem Attribut rowspan

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      th, td { 
        padding: 10px; 
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Monat</th>
        <th>Jahr</th>
      </tr>
      <tr>
        <td  style="background-color:#e6ebef;">März</td>
        <td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
      </tr>
      <tr style="background-color:#e6ebef;">
        <td style="background-color:#e6ebef;">April</td>
      </tr>
    </table>
  </body>
</html>

Ergebnis

td beispiel

Attribute

Es wird in HTML5 nicht unterstützt.
Attribut Wert Beschreibung
abbr text Es bestimmt die abgekürzte Variante des Zelleninhalts oder dient zum alternativen Text.
Es wird in HTML5 nicht unterstützt.
align left
right
center
justify
char
Es richtet den Zelleninhalt aus.
Es wird in HTML5 nicht unterstützt.
axis category_name Es gruppiert die Zellen, die aneinander ähnliche Information enthalten.
Es wird in HTML5 nicht unterstützt.
backgroun background Es bestimmt das Hintergrundbild der Zelle.
Es wird in HTML5 nicht unterstützt.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Es bestimmt dies Hintergrundfarbe der Tabellenzelle.
Es wird in HTML5 nicht unterstützt.
bordercolor bordercolor Es bestimmt die Rahmenfarbe.
char character Es richtet den Inhalt der Zelle nach dem angegebenen Symbol aus. Das Attribut char wird nur dann verwendet, wenn das Attribut align = "char".
Es wird in HTML5 nicht unterstützt.
charoff number Es richtet den Inhalt der Zelle nach dem im Attribut angegebenen Symbol nach rechts oder links aus. Das Attribut charoff wird nur dann verwendet, wenn das Attribut align = "char".
Es wird in HTML5 nicht unterstützt.
colspan number Das Attribut bestimmt die Anzahl von Kolumnen, die die Zelle erfassen soll. Der Wert des Attributes soll eine positive ganze Zahl sein. Es ist nicht empfehlenswert, ein Wert größer als 1000 zu verwenden, da er bis zu dieser Zahl verringert sein kann. Voreingestellt beträgt der Wert 1.
headers header_id Es bestimmt id einer oder mehreren Kopfzeilen der Zellen, die durch das HTML-Tag <th> bestimmt werden. Das Attribut wird im Browser nicht dargestellt, aber kann fürs Lesen vom Bildschirm oder in der Arbeit von Skripten verwendet werden.
height %
pixels
Es bestimmt die Zellenhöhe.
Es wird in HTML5 nicht unterstützt.
nowrap nowrap Es bestimmt, dass der Inhalt in der Zelle nicht übertragen werden soll.
Es wird in HTML5 nicht unterstützt.
rowspan number Das Attribut bestimmt die Anzahl der Zeilen, die die Zelle erfassen soll. Der Wert des Attributes soll eine positive ganze Zahl sein. Es ist nicht empfehlenswert, der Wert größer als 65534 zu verwenden, da er bis zu dieser Zahl abgekürzt werden kann. Voreingestellt beträgt der Wert 1.
scope col
colgroup
row
rowgroup
Es bestimmt die Methode, durch die die Kopfzeile (HTML-Tag <th>) mit den Zellen der Tabelle verbindet sein muss.
Es wird in HTML5 nicht unterstützt.
valign top
middle
bottom
baseline
Es richtet den Inhalt der Zellen nach vertikal aus.
Es wird in HTML5 nicht unterstützt.
width %
pixels
Es bestimmt die Zellenbreite.
Es wird in HTML5 nicht unterstützt.

Das Tag <td> unterschtützt auch Globale Attribute und Globale Eventhandler.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Was repräsentiert das td-Tag in HTML?
Finden Sie das nützlich?