Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pengepala mendatar untuk jadual?
Bagaimana untuk menetapkan pengepala mendatar untuk jadual?
- WBOYke hadapan
- 2023-09-01 18:05:021120semak imbas
Jadual dalam HTML boleh mempunyai pengepala mendatar dan pengepala menegak Untuk pengepala mendatar, kita perlu menetapkan semua
Berikut ialah sintaks untuk menetapkan tajuk mendatar jadual:
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>Terjemahan bahasa Cina bagi Contoh 1
ialah:
Contoh 1Sekarang mari kita lihat contoh program untuk menetapkan pengepala mendatar untuk jadual.
<!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;
padding: 20px;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Apabila melaksanakan program di atas, ia akan memaparkan jadual dengan pengepala mendatar Nama Pertama dan Peranan kerja.
Contoh 2Kini, dalam contoh kedua ini, kami cuba mencipta satu lagi contoh 3 baris dengan pengepala mendatar "
Nama", "Umur" dan "Teknologi" −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
Berikut adalah output untuk contoh program di atas.Contoh 3
Kami juga boleh menetapkan tajuk menegak untuk jadual. Di bawah ialah contoh mencipta pengepala menegak untuk jadual.
<!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;
padding: 20px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>First Name </th>
<td></td>
<td></td>
</tr>
<tr>
<th>Last Name</th>
<td ></td>
<td></td>
</tr>
<tr>
<th>Job role</th>
<td ></td>
<td></td>
</tr>
</table>
</body>
</html>
Berikut adalah output untuk contoh program di atas.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan pengepala mendatar untuk jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Serlahkan kandungan HTML untuk rujukanArtikel seterusnya：Serlahkan kandungan HTML untuk rujukan