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
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="#">[email protected]</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;">[email protected]; <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>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <td>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <td>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <td>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
Quelle est la fonction de la balise <td> en HTML?
Correcte!
Incorrecte!