Rumah >hujung hadapan web >html tutorial >Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?
Bagaimana untuk menyelaraskan teks dalam sel jadual dalam HTML?
- PHPzke hadapan
- 2023-09-10 10:09:062823semak imbas
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
Secara lalai, kandungan
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>
Berikut ialah sintaks untuk teks penjajaran tengah dalam teg
<td style="text-align: center">Table header...</td>
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>
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>
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!