Tag HTML <td>

Le tag <td> est utilisé pour créer une cellule standard du Tableau HTML. Le tag doit être situé dans le conteneur <tr>, qui définit les lignes de la table. Pour déterminer la cellule d’en-tête, on utilise le tag <th>.

Le contenu du tag <td> peut être n’importe quel élément HTML; un texte, un forme, une image, un tableau etc. Par défaut, le contenu de la cellule est affiché par le police ordinaire et est aligné à gauche.

Notez, que toutes les lignes de la table contiennent le même nombre de cellules, ce qui correspond au nombre de cellules de la plus longue ligne. S'il y a moins de cellules dans une ligne que dans les autres lignes, le navigateur remplit automatiquement la ligne en plaçant des cellules vides à la fin de la même ligne.

Si vous devez souligner qu'il n'y a pas de données dans d'autres cellules, créez une cellule sans contenu à l'emplacement requis.

Les cellules ajoutées par le navigateur n'ont pas de cadres et, si elles se suivent, elles seront affichées sous la forme d'une cellule fusionnée.

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Mois</th>
        <th>Date</th>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>Mars</td>
        <td>10.09.2018</td>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>Juin</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Dans cet exemple, nous définissons les lignes de la table avec des tags <tr>, les cellules d'en-tête sont définies avec des tags <th> et les cellules standard sont étiquetées avec des tags <td>.

L'attribut colspan et rowspan sont en général utilisés avec le tag <td> pour laisser le contenu s'étendre sur plusieurs colonnes ou lignes.

Exemple avec l'attribut colspan

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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 de l'entreprise</th>
        <th>Date</th>
      </tr>
      <tr>
        <td style="background-color:#e6ebef;"><a href="#">info@w3docs.com</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;">info@w3docs.com; <strong>01.09.2017 </strong><span style="font-size:14px;">(received date)</span></td>
      </tr>
    </table>
  </body>
</html>

Résultat

Exemple avec l'attribut rowspan

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Mois</th>
        <th>Année</th>
      </tr>
      <tr>
        <td  style="background-color:#e6ebef;">Mars</td>
        <td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
      </tr>
      <tr style="background-color:#e6ebef;">
        <td style="background-color:#e6ebef;">Avrile</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Attributs

Attribut Valeur Description
abbr text Définit la version abrégée du contenu de la cellule ou agit comme un texte alternatif.
align left
right
center
justify
char
Aligne le contenu de la cellule des données de la table.
Non supporté en HTML5.
axis category_name Définit le regroupement des cellules, connectés les uns aux autres par des informations similaires.
Non supporté en HTML5.
background background Spécifie l'image d'arrière-plan dans la cellule.
Non supporté en HTML5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Spécifie le couleur d’arrière-plan dans la cellule de la table.
Non supporté en HTML5.
bordercolor bordercolor Spécifie le couleur des cadres.
Non supporté en HTML5.
char character Aligne le contenu de la cellule des données de la table par le symbole donné. L'attribut char n'est utilisé que si l'attribut align = "char".
Non supporté en HTML5.
charoff number L'attribut vous permet d'aligner dans la cellule de données le symbole spécifié dans l'attribut d'attribut à droite ou à gauche. L'attribut charoff est utilisé uniquement si l'attribut align = "char".
Non supporté en HTML5.
colspan number L'attribut spécifie le nombre de colonnes que la cellule doit couvrir. La valeur de l'attribut doit être un entier positif. Il n'est pas recommandé d'utiliser des valeurs supérieures à 1000, car ils peuvent être réduits à ce nombre. La valeur par défaut est 1.
headers header_id Spécifie l'ID d'un ou plusieurs en-têtes de cellule, définis par la balise HTML <th>. L'attribut n'est pas affiché dans le navigateur, mais peut être utilisé pour lire à partir de l'écran ou des scripts.
height %
pixels
Spécifie la hauteur de la cellule.
Non supporté en HTML5.
nowrap nowrap Indique que le contenu de la cellule ne doit pas être transféré.
Non supporté en HTML5.
rowspan number Cet attribut spécifie le nombre de lignes que la cellule de données doit couvrir. La valeur de l'attribut doit être un entier positif. Il n'est pas recommandé d'utiliser des valeurs supérieures à 65534, car ils peuvent être tronqués à ce numéro. La valeur par défaut est 1.
scope col
colgroup
row
rowgroup
Spécifie la manière de lier la cellule d'en-tête (balise HTML <th>) aux cellules de données. в таблице.
Non supporté en HTML5.
valign top
middle
bottom
baseline
Spécifie l'alignement vertical du contenu dans la cellule de données.
Non supporté en HTML5.
width %
pixels
Spécifie la largeur de la cellule de données.
Non supporté en HTML5.

Le tag <td> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <td> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <td>:

Coloration du texte dans le tag HTML <td>:

Styles de mise en page du texte pour la tag HTML <td>:

Autres propriétés utiles pour le tag HTML <td>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées