Bagaimana untuk menetapkan pengepala mendatar untuk jadual?-html tutorial-php.cn

Bagaimana untuk menetapkan pengepala mendatar untuk jadual?

WBOY

Lepaskan： 2023-09-01 18:05:02

ke hadapan

1180 orang telah melayarinya

Jadual dalam HTML boleh mempunyai pengepala mendatar dan pengepala menegak Untuk pengepala mendatar, kita perlu menetapkan semua

dalam satu .

Tatabahasa

Berikut ialah sintaks untuk menetapkan tajuk mendatar jadual:

<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
Salin selepas log masuk
Terjemahan bahasa Cina bagi
Contoh 1
ialah:
Contoh 1

Sekarang 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>
Salin selepas log masuk

Apabila melaksanakan program di atas, ia akan memaparkan jadual dengan pengepala mendatar
Nama Pertama dan Peranan kerja.
Contoh 2

Kini, 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!