HTML <td> Tag

Definition und Verwendung

<td> Der Tag definiert die Standardzelle in einer HTML-Tabelle.

HTML-Tabelle hat zwei Zellen:

  • Titelzelle - enthält Titelinformationen (verwendet <th> Element erstellt)
  • Datenzelle - enthält Daten (verwendet <td> Element erstellt)

Standardmäßig:<td> Der Text im Element ist normal und linksbündig.

Der Text im <th>-Element ist standardmäßig fett und zentriert.

Weitere Informationen:

HTML-Tutorial:HTML Tabelle

HTML DOM-Referenzhandbuch:TableData-Objekt

CSS-Tutorial:Tabelle-Stil einrichten

Beispiel

Beispiel 1

Eine einfache HTML-Tabelle mit zwei Zeilen und vier Zellen:

<table>
  <tr>
    <td>Zelle A</td>
    <td>Zelle B</td>
  </tr>
  <tr>
    <td>Zelle C</td>
    <td>Zelle D</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 2

Wie man ausrichtet <td> Inhalt (CSS verwendet):

<table style="width:100%">
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 3

Wie man die Hintergrundfarbe zu den Zellen einer Tabelle hinzufügt (CSS verwenden):

<table>
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Januar</td>
    <td style="background-color:#00FF00">3400 Yuan</td>
  </tr>
 </table>

Probieren Sie es selbst aus

Beispiel 4

Wie wird die Höhe von Tabellenzellen eingestellt (CSS verwendet):

<table>
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td style="height:100px">Januar</td>
    <td style="height:100px">3400 Yuan</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 5

Wie wird verhindert, dass Zeilen in Tabellenzellen umgebrochen werden (CSS verwendet):

<table>
  <tr>
    <th>Reim</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Tschüss, weißer Kaiser, zwischen den bunten Wolken, zurück nach Jiangling in tausend Meilen, in einem Tag. Die Schreie der Affen auf beiden Ufern hören nicht auf, das leichte Boot ist schon über tausend Berge hinaus.</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 6

Wie wird vertikale Ausrichtung erreicht: <td> Inhalt (CSS verwendet):

<table style="width:50%;">
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Januar</td>
    <td style="vertical-align:bottom">3400 Yuan</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 7

Wie wird die Breite von Tabellenzellen eingestellt (CSS verwendet):

<table style="width:100%">
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td style="width:70%">Januar</td>
    <td style="width:30%">3400 Yuan</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 8

Wie wird ein Tabellenkopf erstellt:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 9

Wie wird ein mit Titel versehener Tisch erstellt:

<table>
  <caption>Monatliche Ersparnisse</caption>
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>3400 Yuan</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>4500 Yuan</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 10

Wie definiert man Zellen von Tabellen, die über Zeilen oder Spalten hinausgehen:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Probieren Sie es selbst aus

Eigenschaft

Eigenschaft Wert Beschreibung
colspan Zahlen Definieren Sie die Anzahl der Spalten, die die Zelle überqueren soll.
headers header_id Definieren Sie eine oder mehrere Zellen, die mit der Zelle verknüpft sind.
rowspan Zahlen Stellen Sie die Anzahl der Zeilen ein, die die Zelle überqueren soll.

Globale Attribute

<td> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<td> Der Tag unterstützt auch Ereignisattribute in HTML.

Standard-CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <td> Element:

td {
  display: table-cell;
  vertical-align: inherit;
{}

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung