Balise HTML <td>
La balise <td> spécifie une cellule de données standard dans un tableau HTML. Elle doit être utilisée comme élément enfant de <tr>, qui définit une ligne dans un tableau. Pour définir une cellule d’en-tête, on utilise la balise <th>.
La balise <td> peut contenir du texte, des formulaires, des images, des tableaux, etc. Le contenu à l’intérieur est aligné à gauche par défaut.
TIP
Si vous présentez des données tabulaires dans des tableaux, chaque cellule de données doit être ajoutée individuellement en tant qu’élément <td>.
Toutes les lignes du tableau contiennent un nombre égal de cellules, ce qui correspond au nombre de cellules de la ligne la plus longue. S’il y a moins de cellules dans une ligne, le navigateur remplira automatiquement la ligne en plaçant des cellules vides à la fin.
TIP
Les tableaux plus avancés peuvent contenir les éléments <caption>, <colgroup>, <col>, <tfoot>, <tbody> ou <thead>.
Si vous devez souligner qu’il n’y a pas de données dans d’autres cellules, créez alors une cellule sans contenu là où c’est nécessaire.
Les cellules ajoutées par le navigateur n’ont pas de bordures, et si elles se suivent, elles seront affichées comme une seule cellule intégrée.
Syntaxe
La balise <td> se présente par paires. Le contenu est écrit entre les balises ouvrante (<td>) et fermante (</td>).
Balise HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Exemple de la balise HTML <td> :
Mois et date|Exemple de la balise HTML <td>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Dans cet exemple, nous utilisons la balise <tr> pour définir les lignes du tableau, <th> pour définir les cellules d’en-tête et <td> pour définir les cellules de données standard.
Les attributs colspan et rowspan sont couramment utilisés avec la balise <td> pour permettre au contenu de s’étendre sur plusieurs colonnes ou lignes.
Exemple de la balise HTML <td> avec l’attribut colspan :
E-mail de l’entreprise et date|Exemple de la balise HTML <td>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr style="height:60px;">
<td colspan="2" valign="bottom">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Résultat
Exemple de la balise HTML <td> avec l’attribut rowspan :
Exemple avec l’attribut rowspan|Balise HTML <td>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Month</th>
<th>Year</th>
</tr>
<tr>
<td style="background-color:#e6ebef;">March</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>Problèmes de mise en page de <td>
Par défaut, les éléments de données du tableau sont disposés verticalement, alignés avec les éléments de données des lignes précédentes et suivantes. Par exemple, si un tableau contient quatre lignes de cellules de données, la première cellule de données de chaque ligne est alignée avec la première cellule de données des autres lignes. Et si vous ajoutez un élément <td> supplémentaire à une seule ligne, le résultat sera peu esthétique. À l’aide de l’attribut colspan, vous pouvez résoudre ce problème. Ici, les cellules situées en dessous et au-dessus de la cellule supplémentaire seront configurées pour s’étendre sur deux cellules de données du tableau.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| abbr | text | Définit une version abrégée du contenu d’une cellule, ou un texte alternatif. (Les agents utilisateurs, tels que les lecteurs vocaux, peuvent présenter cette description avant le contenu lui-même). Non pris en charge en HTML 5. |
| align | left right center justify char | Aligne le contenu d’une cellule. Non pris en charge en HTML 5. |
| axis | category_name | Catégorise les cellules ayant un contenu similaire. Non pris en charge en HTML 5. |
| background | background | Définit l’arrière-plan d’une cellule. Non pris en charge en HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Définit la couleur d’arrière-plan d’une cellule. Non pris en charge en HTML 5. |
| bordercolor | bordercolor | Définit la couleur de la bordure. Non pris en charge en HTML 5. |
| char | character | Aligne le contenu d’une cellule sur un caractère. Utilisé uniquement si l’attribut align="char". Non pris en charge en HTML 5. |
| charoff | number | Définit le nombre de caractères à partir du caractère spécifié par l’attribut char auquel le contenu sera aligné. Utilisé uniquement si l’attribut align="char". Non pris en charge en HTML 5. |
| colspan | number | Définit le nombre de colonnes sur lesquelles une cellule doit s’étendre. La valeur de l’attribut doit être un entier positif. La valeur par défaut est 1. |
| headers | header_id | Spécifie une ou plusieurs cellules d’en-tête (définies par la balise <th>) auxquelles une cellule standard est liée. |
| height | % pixels | Définit la hauteur d’une cellule. Non pris en charge en HTML 5. |
| nowrap | nowrap | Spécifie que le contenu à l’intérieur d’une cellule ne doit pas passer à la ligne. Non pris en charge en HTML 5. |
| rowspan | number | Spécifie le nombre de lignes sur lesquelles une cellule doit s’étendre. La valeur de l’attribut doit être un entier positif. La valeur par défaut est 1. Il n’est pas recommandé d’utiliser des valeurs supérieures à 65534, car elles seront ramenées à 65534. |
| scope | col colgroup row rowgroup | Définit les cellules auxquelles l’élément d’en-tête (défini dans <th>) se rapporte. Non pris en charge en HTML 5. |
| valign | top middle bottom baseline | Spécifie l’alignement vertical du contenu à l’intérieur d’une cellule. Non pris en charge en HTML 5. |
| width | % pixels | Définit la largeur d’une cellule. Non pris en charge en HTML 5. |
La balise <td> prend en charge les attributs globaux et les attributs d’événement.
Comment styliser une balise HTML <td>
{
"tag_name": "td"
}Practice
What are the attributes of the HTML <td> tag?