Heim  >  Artikel  >  Web-Frontend  >  Wie richtet man Text in Tabellenzellen in HTML zentriert aus?

Wie richtet man Text in Tabellenzellen in HTML zentriert aus?

PHPz
PHPznach vorne
2023-09-10 10:09:062721Durchsuche

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>

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

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

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>

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>

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen