Wie richtet man Text in Tabellenzellen in HTML zentriert aus?-HTML-Tutorial-php.cn

Wie richtet man Text in Tabellenzellen in HTML zentriert aus?

PHPz

Freigeben： 2023-09-10 10:09:06

nach vorne

2807 Leute haben es durchsucht

Wie richtet man Text in Tabellenzellen in HTML zentriert aus?

Wir verwenden die CSS-Eigenschaft text-align, um Text in Tabellenzellen zentriert auszurichten. Wir verwenden ein internes Inline-Stylesheet, um Text in Tabellenzellen auszurichten.

Die text-align-Eigenschaft von CSS legt die Ausrichtung des Inhalts in

fest.

Standardmäßig ist der Inhalt von

zentriert und der Inhalt von Wir können die Ausrichtung ändern, indem wir diese Eigenschaft mit anderen Eigenschaften überschreiben.

Wir können den Ausrichtungswert auch nach links und rechts ändern.

Grammatik

Das Folgende ist die Syntax zum zentrierten Ausrichten von Text im

-Tag.

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

Nach dem Login kopieren

Das Folgende ist die Syntax für die zentrierte Ausrichtung von Text in einem -Tag.

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

Nach dem Login kopieren

Beispiel 1

Nachfolgend finden Sie ein Beispiel für die zentrierte Ausrichtung von Text in einer Tabellenzelle in 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>

Nach dem Login kopieren

Das Folgende ist die Ausgabe des obigen Beispielprogramms.

Beispiel 2

Schauen wir uns ein weiteres Beispiel an, um dies zu veranschaulichen –

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie richtet man Text in Tabellenzellen in HTML zentriert aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!