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>