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