td/th vAlignPropriété
Objet td/th
Définition et utilisation
La propriété vAlign définit ou renvoie l'alignement vertical des données dans une cellule.
Syntaxe
Définir la propriété vAlign :
tdObject.vAlign="baseline|bottom|middle|top"
ou
thObject.vAlign="baseline|bottom|middle|top"
ou
thObject.vAlign="baseline|bottom|middle|top"
Renvoie la propriété vAlign :
tdObject.vAlign
ou
thObject.vAlign
ou
thObject.vAlign
| Valeur | Description |
|---|---|
| baseline | Aligner sur la ligne de base. |
| bottom | Aligner le contenu en bas. |
| middle | Aligner le contenu au centre. |
| top | Aligner le contenu en haut. |
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge la propriété vAlign.
Exemple
Exemple
L'exemple suivant modifie l'alignement vertical des données dans une cellule :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById('td1').vAlign="top";
document.getElementById('td2').vAlign="top";
document.getElementById('td3').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Texte</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
<td id="td3">Bonjour, je m'appelle Peter. J'ai besoin d'un texte long pour démontrer, j'ai besoin d'un texte long pour démontrer.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Aligner le contenu en haut</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById('td1').vAlign="top";
document.getElementById('td2').vAlign="top";
document.getElementById('td3').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Texte</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
<td id="td3">Bonjour, je m'appelle Peter. J'ai besoin d'un texte long pour démontrer, j'ai besoin d'un texte long pour démontrer.</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Aligner le contenu en haut</button>
</body>
</html>
Essayez-le vous-même »
Objet td/th Autres extensions