HTML-Tag <td>

❮ Vorige Nächste ❯

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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.

HTML-Tag <td>

Syntax

Beispiel

Ergebnis

Ein Beispiel mit dem Attribut colspan

Ergebnis

Ein Beispiel mit dem Attribut rowspan

Ergebnis

Attribute

Browser-Support

Übe dein Wissen