La balise HTML <td>
La balise <td> définit une cellule de données standard dans un tableau HTML. Elle doit être utilisée comme enfant de <tr>.
La balise <td> définit 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.
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, équivalent au nombre de cellules de la ligne la plus longue. Si une ligne comporte moins de cellules, le navigateur remplira automatiquement la ligne en plaçant des cellules vides à la fin.
Si vous devez indiquer qu'il n'y a pas de données dans certaines cellules, créez une cellule sans contenu à l'endroit approprié.
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> vient par paires. Le contenu est écrit entre les balises ouvrante (<td>) et fermante (</td>).
La balise HTML <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Exemple de la balise HTML <td> :
<!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.
Fusion de colonnes et de lignes
Les attributs colspan et rowspan sont couramment utilisés avec la balise <td> pour permettre à une cellule de s'étendre sur plusieurs colonnes ou lignes.
colspandéfinit le nombre de colonnes qu'une cellule occupe. La valeur doit être un entier positif ; la valeur par défaut est1. Une cellule aveccolspan="2"occupe l'espace horizontal de deux cellules normales, donc la ligne à laquelle elle appartient doit contenir un<td>de moins que les autres lignes.rowspandéfinit le nombre de lignes qu'une cellule occupe. La valeur doit être un entier positif ; la valeur par défaut est1. Une cellule avecrowspan="2"s'étend vers le bas dans la ligne suivante, de sorte que cette ligne suivante doit omettre le<td>qui se trouverait en dessous.
Veillez à ne pas créer une fusion plus grande que ce que le tableau permet. Si un colspan ou un rowspan dépasse le bord du tableau, les navigateurs le limitent aux colonnes ou lignes disponibles plutôt que d'en ajouter de nouvelles. À l'inverse, si vous oubliez de supprimer les cellules qu'une fusion recouvre, la ligne se retrouve avec trop de cellules et la mise en page du tableau est brisée.
Exemple de la balise HTML <td> avec l'attribut colspan :
<!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;
vertical-align: bottom;
}
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>
<td colspan="2">[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 :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Association des cellules aux en-têtes pour l'accessibilité
Dans un tableau simple, les lecteurs d'écran peuvent associer automatiquement chaque cellule de données à son en-tête de colonne et de ligne. Dans un tableau complexe — comportant plusieurs niveaux d'en-têtes ou des cellules fusionnées — cette association automatique ne fonctionne plus. Pour que de tels tableaux restent lisibles par les technologies d'assistance, attribuez un id à chaque <th>, puis listez les ids pertinents dans l'attribut headers de chaque <td> concerné. Une cellule peut référencer plusieurs en-têtes en séparant leurs ids par des espaces.
Exemple de la balise HTML <td> avec l'attribut headers :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Ici, chaque cellule de données renvoie à l'en-tête qui la décrit, de sorte qu'un lecteur d'écran peut annoncer, par exemple, « Rate : $25 » au lieu de simplement « $25 ».
Problèmes de mise en page avec <td>
Par défaut, chaque cellule de données s'aligne verticalement avec les cellules de la même colonne dans les autres lignes. Ajouter un <td> supplémentaire dans une seule ligne perturbe cet alignement, car chaque cellule suivante de cette ligne se décale d'une colonne.
Par exemple, cette ligne comporte trois cellules alors que le reste du tableau en a deux, donc ses cellules ne s'alignent plus sous les en-têtes :
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>La solution consiste à fusionner des cellules avec colspan plutôt que d'ajouter une colonne supplémentaire. Ici, la cellule « March » s'étend sur les deux colonnes au-dessus des totaux, ce qui maintient la grille alignée :
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>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 supporté en HTML 5. |
| align | left right center justify char | Aligne le contenu dans une cellule. Non supporté en HTML 5. |
| axis | category_name | Catégorise les cellules ayant un contenu similaire. Non supporté en HTML 5. |
| background | background | Définit l'arrière-plan d'une cellule. Non supporté en HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Définit la couleur d'arrière-plan d'une cellule. Non supporté en HTML 5. |
| bordercolor | bordercolor | Définit la couleur de la bordure. Non supporté en HTML 5. |
| char | character | Aligne le contenu d'une cellule sur un caractère. Utilisé uniquement si l'attribut align="char". Non supporté en HTML 5. |
| charoff | number | Définit le nombre de caractères à partir desquels le contenu sera aligné par rapport au caractère spécifié par l'attribut char. Utilisé uniquement si l'attribut align="char". Non supporté en HTML 5. |
| colspan | number | Définit le nombre de colonnes qu'une cellule doit occuper. 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 associée. |
| height | % pixels | Définit la hauteur d'une cellule. Non supporté en HTML 5. |
| nowrap | nowrap | Spécifie que le contenu à l'intérieur d'une cellule ne doit pas être renvoyé à la ligne. Non supporté en HTML 5. |
| rowspan | number | Spécifie le nombre de lignes qu'une cellule doit occuper. 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. |
| valign | top middle bottom baseline | Spécifie l'alignement vertical du contenu à l'intérieur d'une cellule. Non supporté en HTML 5. Utilisez la propriété CSS vertical-align à la place. |
| width | % pixels | Définit la largeur d'une cellule. Non supporté en HTML 5. |
La balise <td> prend en charge les Attributs globaux et les Attributs d'événement.
L'attribut scope n'est pas valide sur <td> ; il appartient à l'élément <th>, où il déclare si un en-tête s'applique à une colonne ou à une ligne. Utilisez headers sur un <td> pour pointer vers ses cellules d'en-tête à la place.
Comment styliser une balise HTML <td>
Les styles les plus courants pour <td> contrôlent l'espacement, les bordures et l'alignement. Ciblez td avec th afin que les cellules d'en-tête et de données partagent un aspect cohérent :
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Balises associées
<table>— le conteneur qui regroupe toutes les lignes et cellules.<tr>— définit une ligne de tableau ; chaque<td>doit se trouver à l'intérieur d'une.<th>— définit une cellule d'en-tête, associée à<td>via l'attributheaders.