Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat jadual dengan pengepala?

Bagaimana untuk membuat jadual dengan pengepala?

WBOYke hadapan: 2023-08-24 22:49:031411semak imbas

Kami menggunakan teg untuk membuat jadual dengan tajuk dalam HTML. Teg tajuk akan dimasukkan selepas teg Kita boleh menambah tajuk pada jadual. Secara lalai, penjajaran label dipusatkan. Kita boleh menukar penjajaran menggunakan sifat penjajaran CSS.

Tatabahasa

Berikut ialah sintaks tag tajuk HTML

<caption>Caption of the table...</caption>

Contoh 1

Dalam contoh di bawah, kami telah mencipta jadual yang mengandungi nama pekerja dan ID pekerja menggunakan Pekerja sebagai tajuk.

<!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>
      <caption>Employees</caption>
      <tr>
         <th>EmployeeName</th>
         <th>EmployeeId</th>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>022</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>025</td>
      </tr>
      <tr>
         <td>Jason</td>
         <td>208</td>
      </tr>
   </table>
</body>
</html>

Sifat penjajaran

Kita boleh menggunakan penjajaran atribut CSS untuk menukar penjajaran. Berikut ialah sintaksnya:

<caption style="text-align:value" >Caption of the table...</caption>

Contoh 2

diterjemahkan sebagai:

Contoh 2

Dalam contoh di bawah, kami menyelaraskan tajuk ke sebelah kiri halaman -

<!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>
      <caption style="text-align: left">Employees</caption>
      <tr>
         <th>EmployeeName</th>
         <th>EmployeeId</th>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>022</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>025</td>
      </tr>
      <tr>
         <td>Jason</td>
         <td>208</td>
      </tr>
   </table>
</body>
</html>

Terjemahan bahasa Cina bagi

Contoh 3

ialah:

Contoh 3

Mari kita lihat satu lagi contoh mencipta tajuk -

<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <table>
      <caption>Authors</caption>
      <tr>
         <th>JavaFX</th>
         <th>Krishna</th>
      </tr>
      <tr>
         <td>Scala</td>
         <td>Satish</td>
      </tr>
   </table>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membuat jadual dengan pengepala?. 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：Dalam JavaScript, apakah tujuan acara onhashchange?Artikel seterusnya：Dalam JavaScript, apakah tujuan acara onhashchange?

Artikel berkaitan

Lihat lagi