HTML <tfoot> 标籤
- หน้าก่อน <textarea>
- หน้าต่อไป <th>
ការពិពណ៌នា និង ការប្រើប្រាស់
<tfoot>
ស្លាក ដើម្បីបញ្ជូនមាតិ <tfoot> នៅក្នុង HTML តារាង
<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>
ตามแบบฉบับ แท็กก์ยังสนับสนุน รายละเอียดคุณสมบัติโลกะลังกาใน HTML。
รายละเอียดเหตุการณ์
<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>