พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน tfoot Tag

<tfoot> ใน HTML5 คือแท็กที่ใช้สำหรับการกำหนดส่วนท้ายของตาราง (table footer) โดยแท็กนี้จะใช้ควบคู่กับแท็ก <table>, <thead>, และ <tbody> เพื่อแบ่งส่วนต่าง ๆ ของตารางให้อ่านและจัดการได้ง่ายขึ้น

การใช้งานทั่วไปของ <tfoot>

แท็ก <tfoot> จะถูกใช้เพื่อแสดงข้อมูลที่เกี่ยวข้องกับการสรุปผลลัพธ์ หรือตัวเลขสรุปที่ด้านล่างของตาราง เช่น การสรุปยอดรวม เป็นต้น แม้ว่าจะอยู่ในตำแหน่งท้ายของตาราง แต่ HTML จะทำการโหลด <tfoot> ก่อน <tbody> เมื่อทำการเรนเดอร์ในหน้าเว็บ

โครงสร้างพื้นฐาน

HTML
<table>
  <thead>
    <tr>
      <th>สินค้า</th>
      <th>จำนวน</th>
      <th>ราคา</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>โทรศัพท์มือถือ</td>
      <td>2</td>
      <td>20,000</td>
    </tr>
    <tr>
      <td>หูฟัง</td>
      <td>1</td>
      <td>1,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">รวมทั้งหมด</td>
      <td>21,500</td>
    </tr>
  </tfoot>
</table>

การประยุกต์ใช้งาน <tfoot> ในรูปแบบต่าง ๆ

สรุปยอดรวม ใช้ <tfoot> สำหรับการแสดงผลรวมของข้อมูลในตาราง เช่น จำนวนรวมของสินค้าหรือราคาสินค้า

HTML
<tfoot>
  <tr>
    <td colspan="2">รวมทั้งหมด</td>
    <td>21,500</td>
  </tr>
</tfoot>

การแสดงข้อมูลเพิ่มเติม นอกจากการสรุปยอดแล้ว <tfoot> สามารถใช้เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับตาราง เช่น ข้อความสำคัญหรือคำอธิบายเพิ่มเติม

HTML
<tfoot>
  <tr>
    <td colspan="3">หมายเหตุ: ราคานี้รวมภาษีมูลค่าเพิ่มแล้ว</td>
  </tr>
</tfoot>

การใช้งาน <tfoot> ร่วมกับ CSS เราสามารถจัดรูปแบบ <tfoot> โดยใช้ CSS เพื่อให้ส่วนท้ายของตารางดูโดดเด่น เช่นการใช้สีพื้นหลังหรือการจัดวางข้อความ

HTML
<style>
  tfoot {
    background-color: #f9f9f9;
    font-weight: bold;
  }
</style>

<tfoot>
  <tr>
    <td colspan="2">รวมทั้งหมด</td>
    <td>21,500</td>
  </tr>
</tfoot>

การใช้งาน <tfoot> กับ JavaScript ในกรณีที่ต้องการสร้างตารางที่มีข้อมูลที่เปลี่ยนแปลงแบบไดนามิก เราสามารถใช้ JavaScript เพื่อคำนวณค่าต่าง ๆ แล้วแสดงผลใน <tfoot>

HTML
<script>
  function calculateTotal() {
    let total = 20000 + 1500;
    document.getElementById("total").innerHTML = total;
  }

  window.onload = calculateTotal;
</script>

<tfoot>
  <tr>
    <td colspan="2">รวมทั้งหมด</td>
    <td id="total"></td>
  </tr>
</tfoot>

สรุป

  • <tfoot> ใช้สำหรับกำหนดส่วนท้ายของตาราง โดยส่วนใหญ่จะเป็นการแสดงผลรวม หรือข้อมูลที่สรุปจากตาราง
  • <tfoot> ควรใช้ร่วมกับ <thead> และ <tbody> เพื่อสร้างตารางที่มีโครงสร้างชัดเจนและง่ายต่อการจัดการ
  • สามารถปรับแต่ง <tfoot> ให้มีสไตล์ตามต้องการด้วย CSS และสามารถใช้ JavaScript เพื่อสร้างข้อมูลแบบไดนามิก

การใช้งาน <tfoot> อย่างเหมาะสมจะทำให้ตารางมีความเป็นระเบียบและอ่านง่ายมากขึ้น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ