Teg Kepala dalam HTML-html tutorial-php.cn

Teg Kepala dalam HTML

WBOY

Lepaskan： 2024-09-04 16:30:21

asal

1187 orang telah melayarinya

elemen atau tag digunakan bersama dengan tag dan tag, mentakrifkan pengepala jadual, pengaki jadual dan badan jadual, masing-masing. elemen mentakrifkan pengepala jadual HTML. Untuk menentukan baris atau set baris yang mencipta kepala lajur jadual, kami menggunakan unsur. Dalam erti kata lain, elemen ini mengumpulkan kandungan pengepala dalam jadual HTML. Ia melampirkan keseluruhan baris atau baris dan mengklasifikasikannya sebagai Pengepala Jadual. Dalam topik ini, kita akan mempelajari tentang THhead Tag dalam HTML.

Pengepala Jadual terdiri daripada baris atau baris yang mengandungi maklumat tentang lajur atau data isi jadual.

Cara menggunakan Elemen dalam HTML?

elemen menentukan bahagian pengepala Jadual HTML. Ini dengan itu menjamin kedudukan sebagai anak terdekat bagi elemen jadual, . Sebelum menggunakan mana-mana, , atau elemen, gunakan unsur. elemen mungkin muncul selepas mana-mana elemen jika ada dan unsur. elemen akan mengandungi sekurang-kurangnya satu baris data yang disertakan dalam elemen.

Sintaks

<thead>
<tr>
</tr>
</thead>

Salin selepas log masuk

Sudah tentu, seperti yang ditunjukkan di atas, sama seperti elemen HTML yang lain, elemen juga berfungsi secara berpasangan, teg pembukaan, mempunyai rakan kongsi, tag penutup, .

Contoh THead Tag dalam HTML

Pertimbangkan contoh berikut:

Contoh #1

Kod:

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

Salin selepas log masuk

Output:

Teg Kepala dalam HTML

Perhatikan bahawa jika terdapat keperluan untuk dua baris untuk pengepala jadual anda, kedua-dua data elemen boleh ditambah pada satu unsur. Cuba jangan tambah dua bahagian elemen untuk satu jadual. Perhatikan satu contoh sedemikian di bawah, mempunyai dua baris di bawah bahagian pengepala :

Contoh #2

Kod:

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Salin selepas log masuk

Output:

Teg Kepala dalam HTML

Contoh #3

Kod:

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Salin selepas log masuk

Output:

Teg Kepala dalam HTML

Perhatikan bahawa, walaupun kedua-dua kod di atas menghasilkan output yang sama dan menggunakan elemen untuk dua pengepala boleh dikendalikan oleh sesetengah penyemak imbas. Walau bagaimanapun, ia masih merupakan ralat semantik yang tidak sepatutnya digunakan dalam pengaturcaraan yang betul, dan ia juga akan dinaikkan sebagai bendera merah oleh perkhidmatan pengesahan HTML.

Contoh #4

Mari lihat contoh lain di bawah. Dalam contoh berikut, kami telah mencipta jadual dengan badan jadual yang terdiri daripada empat baris data. Pengepala terdiri daripada satu baris set data kepada warna latar belakang menggunakan CSS. , atau tidak menjejaskan penampilan lalai jadual HTML; oleh itu, sedikit bantuan dengan CSS sudah memadai.

Kod:

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

Salin selepas log masuk

Output:

Teg Kepala dalam HTML

Atribut THead Tag dalam HTML

Elemen HTML menyokong beberapa atribut tambahan berikut.

sejajar: Atribut ini menjajarkan kandungan unsur dan segala isinya. Ia menggunakan kiri, kanan, tengah, justify dan aksara sebagai nilainya.
aksara: Atribut ini menentukan penjajaran kepada kandungan elemen apabila atribut penjajaran ditetapkan kepada char.
valign: Ia menentukan penjajaran menegak kandungan di dalam unsur. Ia menggunakan atas, tengah, bawah atau garis dasar sebagai nilainya.
charoff: Atribut ini menentukan offset terhadap aksara 1^st seperti yang dinyatakan dengan atribut char; iaitu, masa untuk menjajarkan ditetapkan kepada char.
bgcolor: Ia membantu menetapkan warna latar belakang setiap sel di dalam elemen.

Kesimpulan

Kami melihat bagaimana elemen mengenal pasti label lajur dan bukan data jadual, menyimpan maklumat tentang pengepala dan menyuapkannya kepada penyemak imbas, membantu teknologi dengan kandungan dan maknanya.

Atas ialah kandungan terperinci Teg Kepala dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!