ตัวอย่าง
ตาราง HTML ด้วย <thead>, <tfoot> และ <tbody> องค์ประกอบ:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
ลองตัวเอง» ความหมายและการใช้งาน
<thead> แท็กจะใช้ในการเนื้อหาส่วนหัวของกลุ่มในตาราง HTML
<thead> องค์ประกอบที่ถูกนำมาใช้ร่วมกับ <tbody> และ <tfoot> องค์ประกอบเพื่อระบุส่วนหนึ่งของตารางแต่ละ (หัวร่างกายส่วนท้าย)
เบราว์เซอร์สามารถใช้องค์ประกอบเหล่านี้เพื่อเปิดใช้งานการเลื่อนของร่างกายตารางเป็นอิสระจากส่วนหัวและท้าย นอกจากนี้เมื่อการพิมพ์ตารางขนาดใหญ่ที่ครอบคลุมหลาย ๆ หน้าองค์ประกอบเหล่านี้สามารถเปิดใช้ส่วนหัวและส่วนท้ายตารางที่จะพิมพ์ที่ด้านบนและด้านล่างของแต่ละหน้า
<thead> แท็กจะต้องใช้ในบริบทดังต่อไปนี้: ในฐานะที่เป็นลูกของ <table> องค์ประกอบหลังจากใด ๆ <คำบรรยายใต้ภาพ> และ <colgroup> องค์ประกอบและก่อนที่ใด <tbody>, <tfoot> และ <tr> องค์ประกอบ
สนับสนุนเบราว์เซอร์
| ธาตุ | |||||
|---|---|---|---|---|---|
| <thead> | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
เคล็ดลับและคำอธิบาย
หมายเหตุ: <thead> องค์ประกอบต้องมีหนึ่งหรือมากกว่า <tr> แท็กภายใน
แนะนำ: <thead>, <tbody> และ <tfoot> องค์ประกอบที่จะไม่ส่งผลกระทบต่อรูปแบบของตารางโดยค่าเริ่มต้นอย่างไรก็ตามคุณสามารถใช้ CSS สไตล์องค์ประกอบเหล่านี้
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
ไม่มีแอตทริบิวต์ HTML 4.01 ได้รับการสนับสนุนใน HTML5
แอตทริบิวต์
| คุณลักษณะ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| align | right left center justify char | ได้รับการสนับสนุนใน HTML5 สอดคล้องเนื้อหาภายใน <thead> องค์ประกอบ |
| char | character | ได้รับการสนับสนุนใน HTML5 สอดคล้องเนื้อหาภายใน <thead> องค์ประกอบตัวอักษร |
| charoff | number | ได้รับการสนับสนุนใน HTML5 กำหนดจำนวนของตัวละครเนื้อหาภายใน <thead> องค์ประกอบที่จะจัดชิดจากตัวอักษรที่ระบุโดย char แอตทริบิวต์ |
| valign | top middle bottom baseline | ได้รับการสนับสนุนใน HTML5 แนวตั้งสอดคล้องเนื้อหาภายใน <thead> องค์ประกอบ |
แอตทริบิวต์ทั่วโลก
<thead> แท็กยังสนับสนุน แอตทริบิวต์ใน HTML
แอตทริบิวต์เหตุการณ์
<thead> แท็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML
ตั้งค่าเริ่มต้น CSS
เบราว์เซอร์ส่วนใหญ่จะแสดง <thead> องค์ประกอบที่มีค่าเริ่มต้นต่อไปนี้:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}