Maison > Article > interface Web > Comment centrer le texte dans les cellules d’un tableau en HTML ?
Comment centrer le texte dans les cellules d’un tableau en HTML ?
- PHPzavant
- 2023-09-10 10:09:062721parcourir
Nous utilisons la propriété CSS text-align pour centrer le texte dans les cellules du tableau. Nous utilisons une feuille de style interne en ligne pour aligner le texte dans les cellules du tableau.
La propriété text-align de CSS définit l'alignement du contenu dans
Par défaut, le contenu de
Nous pouvons également modifier la valeur d'alignement à gauche et à droite.
Grammaire
Ce qui suit est la syntaxe pour centrer le texte dans la balise
<th style="text-align: center">Table header...</th>
Ce qui suit est la syntaxe pour aligner le texte au centre dans une balise
<td style="text-align: center">Table header...</td>
Exemple 1
Vous trouverez ci-dessous un exemple d'alignement central du texte dans une cellule de tableau en HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
}
</style>
</head>
<body>
<table style="width: 50%">
<caption style="text-align: center; ">Employees</caption>
<tr>
<th style="text-align: center">EmployeeName</th>
<th style="text-align: center">EmployeeId</th>
</tr>
<tr>
<td style="text-align: center">Yadav</td>
<td style="text-align: center">022</td>
</tr>
<tr>
<td style="text-align: center">Abdul</td>
<td style="text-align: center">025</td>
</tr>
<tr>
<td style="text-align: center">Jason</td>
<td style="text-align: center">208</td>
</tr>
</table>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
Exemple 2
Regardons un autre exemple pour illustrer cela -
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
width: 300px;
}
</style>
</head>
<body>
<h1>Authors</h1>
<table>
<tr>
<th>Alchemist</th>
<th>Rich Dad Poor Dad</th>
</tr>
<tr>
<td style="text-align:center">Paulo Coelho</td>
<td style="text-align:center">Robert Kiyosaki</td>
</tr>
</table>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!