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>