Balise <td> HTML

Définition et utilisation

<td> La balise définit la cellule de données standard dans un tableau HTML.

Les tableaux HTML ont deux types de cellules :

  • Cellule de titre - contient des informations de titre (en utilisant <th> création de l'élément)
  • Cellule de données - contient des données (en utilisant <td> création de l'élément)

Par défaut,<td> Le texte dans l'élément est ordinaire et aligné à gauche.

Le texte dans l'élément <th> est par défaut en gras et centré.

Veuillez également consulter :

Tutoriel HTML :Tableau HTML

Manuel de référence HTML DOM :Objet TableData

Tutoriel CSS :Définir le style du tableau

Exemple

Exemple 1

Un tableau HTML simple, composé de deux lignes et de quatre cellules de tableau :

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

Essayez-le vous-même

Exemple 2

Comment aligner <td> du contenu (en utilisant CSS) :

<table style="width:100%">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 3

Comment ajouter une couleur de fond aux cellules d'une table (en utilisant CSS) :

<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Janvier</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Essayez-le vous-même

Exemple 4

Comment définir la hauteur des cellules de tableau (en utilisant CSS) :

<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td style="height:100px">Janvier</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 5

Comment spécifier que les cellules de tableau ne doivent pas sauter de ligne (en utilisant CSS) :

<table>
  <tr>
    <th>Poème</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 6

Comment aligner verticalement <td> du contenu (en utilisant CSS) :

<table style="width:50%;">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Janvier</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 7

Comment définir la largeur des cellules de tableau (en utilisant CSS) :

<table style="width:100%">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td style="width:70%">Janvier</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 8

Comment créer un en-tête de tableau :

<table>
  <tr>
    <th>Nom</th>
    <th>Adresse e-mail</th>
    <th>Téléphone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 9

Comment créer un tableau avec des en-têtes :

<table>
  <caption>Épargne mensuelle</caption>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayez-le vous-même

Exemple 10

Comment définir une cellule de tableau qui dépasse plusieurs lignes ou colonnes :

<table>
  <tr>
    <th>Nom</th>
    <th>Adresse e-mail</th>
    <th colspan="2">Téléphone</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>

Essayez-le vous-même

Attribut

Attribut Valeur Description
colspan Numérique Définir le nombre de colonnes que la cellule doit couvrir.
headers header_id Définir une ou plusieurs cellules titres associées à la cellule.
rowspan Numérique Définir le nombre de lignes que la cellule doit couvrir.

Attributs globaux

<td> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs événement

<td> Les balises prennent également en charge Attributs événement dans HTML.

Configuration CSS par défaut

La plupart des navigateurs utiliseront les valeurs suivantes par défaut pour afficher <td> Élément :

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

Compatibilité avec les navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support