HTML <tfoot> แบบภาพ
- หน้าก่อนหน้า <textarea>
- หน้าต่อไป <th>
การระบุและวิธีใช้
<tfoot>
องค์ประกอบ
<tfoot>
องค์ประกอบ <thead> และ <tbody> องค์ประกอบเหล่านี้ใช้ร่วมกันเพื่อกำหนดส่วนต่างๆ ของตาราง (ท้ายตาราง, หัวตาราง, ตัวอักษร)
เว็บเบราเซอร์สามารถใช้องค์ประกอบเหล่านี้เพื่อที่ในขณะที่ย้อนหลังของตารางที่มีขนาดใหญ่หลายหน้า ข้อมูลหัวตารางและท้ายตารางสามารถแสดงอย่างเดี่ยวๆ ในแต่ละหน้า และในขณะที่พิมพ์ตารางที่แบ่งหน้าหลายหน้า ข้อมูลหัวตารางและท้ายตารางสามารถพิมพ์ที่ด้านบนและด้านล่างของแต่ละหน้า
คำเตือน: ต้องมีองค์ประกอบ <tfoot> ซึ่งมีหนึ่งหรือมากกว่าหนึ่งในตัว <tr> ตามแบบภาพ
<tfoot>
ตามแบบภาพ <table> ลูกขององค์ประกอบ <caption>、<colgroup>、<thead> และ <tbody> หลังจากองค์ประกอบ
คำเตือน:โดยมาตรฐาน <thead>、<tbody> และ <tfoot>
องค์ประกอบจะไม่ส่งผลต่อการจัดละแวกของตาราง。แต่คุณสามารถใช้ CSS ในการตั้งค่ารูปแบบสไตล์ขององค์ประกอบเหล่านี้ (ดูตัวอย่างด้านล่าง)!
ตัวอย่าง
ตัวอย่าง 1
ตาราง HTML ที่มี <thead>、<tbody> และ <tfoot> ฟิลเลอร์:
<table> <thead> <tr> <th>เดือน</th> <th>เงินฝาก</th> </tr> </thead> <tbody> <tr> <td>มกราคม</td> <td>¥3400</td> </tr> <tr> <td>กุมภาพันธ์</td> <td>¥4500</td> </tr> </tbody> <tfoot> <tr> <td>รวม</td> <td>¥7900</td> </tr> </tfoot> </table>
ตัวอย่าง 2
ตั้งค่ารูปแบบสไตล์ของ <thead>、<tbody> และ <tfoot> ด้วย CSS:
<html> <head> <style> thead {color: green;} tbody {color: blue;} tfoot {color: red;} table, th, td { border: 1px solid black; } </style> </head> <body> <table> <thead> <tr> <th>เดือน</th> <th>เงินฝาก</th> </tr> </thead> <tbody> <tr> <td>มกราคม</td> <td>¥3400</td> </tr> <tr> <td>กุมภาพันธ์</td> <td>¥4500</td> </tr> </tbody> <tfoot> <tr> <td>รวม</td> <td>¥7900</td> </tr> </tfoot> </table>
ตัวอย่าง 3
วิธีการจัดลงตรง <tfoot>
ของเนื้อหา (ใช้ CSS):
<table style="width:100%"> <tr> <th>เดือน</th> <th>เงินฝาก</th> </tr> <tr> <td>มกราคม</td> <td>¥3400</td> </tr> <tr> <td>กุมภาพันธ์</td> <td>¥4500</td> </tr> <tfoot style="text-align:center"> <tr> <td>รวม</td> <td>¥7900</td> </tr> </tfoot> </table>
ตัวอย่าง 4
วิธีการจัดลงตรงตั้ง <tfoot>
ของเนื้อหา (ใช้ CSS):
<table style="width:100%"> <tr> <th>เดือน</th> <th>เงินฝาก</th> </tr> <tr> <td>มกราคม</td> <td>¥3400</td> </tr> <tr> <td>กุมภาพันธ์</td> <td>¥4500</td> </tr> <tfoot style="vertical-align:bottom"> <tr style="height:100px"> <td>รวม</td> <td>¥7900</td> </tr> </tfoot> </table>
การใช้งานโลก
<tfoot>
แบบภาพยังสนับสนุน รายละเอียดการใช้งานโลกแบบภาพ。
รายละเอียดเหตุการณ์
<tfoot>
แบบภาพยังสนับสนุน รายละเอียดเหตุการณ์ใน HTML。
การตั้งค่า CSS โดยเริ่มต้น
โปรแกรมนี้จะใช้ค่าเริ่มต้นดังนี้แสดง <tfoot>
องค์ประกอบ:
tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }
การสนับสนุนโปรแกรมนี้
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
- หน้าก่อนหน้า <textarea>
- หน้าต่อไป <th>