Comment centrer le texte dans les cellules d'un tableau en HTML ?-tutoriel HTML-php.cn

Comment centrer le texte dans les cellules d'un tableau en HTML ?

PHPz

Libérer： 2023-09-10 10:09:06

avant

2808 Les gens l'ont consulté

Comment centrer le texte dans les cellules dun tableau en HTML ?

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

et .

Par défaut, le contenu de

est aligné au centre et le contenu de Nous pouvons modifier l'alignement en remplaçant cette propriété par d'autres propriétés.

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>

Copier après la connexion

Ce qui suit est la syntaxe pour aligner le texte au centre dans une balise

<td style="text-align: center">Table header...</td>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!