Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?-html tutorial-php.cn

Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?

PHPz

Lepaskan： 2023-09-10 10:09:06

ke hadapan

2808 orang telah melayarinya

Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?

Kami menggunakan penjajaran teks sifat CSS untuk menjajarkan teks di tengah dalam sel jadual. Kami menggunakan helaian gaya dalaman sebaris untuk menjajarkan teks dalam sel jadual.

Sifat penjajaran teks CSS menetapkan penjajaran kandungan dalam

dan .

Secara lalai, kandungan

dijajarkan ke tengah dan kandungan Kita boleh menukar penjajaran dengan mengatasi sifat ini dengan sifat lain.

Kita juga boleh menukar nilai penjajaran ke kiri dan kanan.

Tatabahasa

Berikut ialah sintaks untuk menjajarkan teks dalam teg

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

Salin selepas log masuk

Berikut ialah sintaks untuk teks penjajaran tengah dalam teg

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

Salin selepas log masuk

Contoh 1

Di bawah ialah contoh teks penjajaran tengah dalam sel jadual dalam 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>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Contoh 2

Mari kita lihat contoh lain untuk menggambarkan ini -

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!