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

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

แท็ก <thead> ใน HTML5 ใช้เพื่อจัดกลุ่มแถวหัวตาราง (table header rows) ในตาราง <table> โดยเฉพาะ ซึ่งจะช่วยในการจัดรูปแบบตารางให้เข้าใจง่ายขึ้น โดยเฉพาะในกรณีที่ตารางมีหลายแถวหลายคอลัมน์ การใช้ <thead> จะช่วยแยกส่วนหัวตารางออกจากเนื้อหาหลักหรือข้อมูลที่แสดงผลในตาราง

การใช้งานแท็ก <thead>

โครงสร้างพื้นฐานของตารางที่มีการใช้แท็ก <thead> มีดังนี้

HTML
<table>
  <thead>
    <tr>
      <th>หัวข้อ 1</th>
      <th>หัวข้อ 2</th>
      <th>หัวข้อ 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 4</td>
      <td>ข้อมูล 5</td>
      <td>ข้อมูล 6</td>
    </tr>
  </tbody>
</table>

อธิบายโครงสร้าง

  • <thead>: ใช้สำหรับเก็บแถวที่เป็นหัวตาราง โดยจะประกอบด้วยแท็ก <tr> (table row) ซึ่งภายในนั้นประกอบไปด้วยแท็ก <th> (table header) ที่ใช้แสดงชื่อหัวคอลัมน์ของตาราง
  • <tbody>: ใช้สำหรับบรรจุเนื้อหาหลักของตาราง โดยจะประกอบไปด้วยแถว (แท็ก <tr>) และแต่ละแถวจะประกอบด้วยแท็ก <td> (table data)

ประโยชน์ของการใช้ <thead>

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

ตัวอย่างการใช้ <thead> กับ CSS

การจัดรูปแบบหัวตารางให้มีสไตล์พิเศษ

HTML
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  thead th {
    background-color: #4CAF50;
    color: white;
    text-align: left;
    padding: 8px;
  }
  
  tbody td {
    border: 1px solid #ddd;
    padding: 8px;
  }
</style>

<table>
  <thead>
    <tr>
      <th>หัวข้อ 1</th>
      <th>หัวข้อ 2</th>
      <th>หัวข้อ 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 4</td>
      <td>ข้อมูล 5</td>
      <td>ข้อมูล 6</td>
    </tr>
  </tbody>
</table>

ผลลัพธ์

การประยุกต์ใช้ <thead> กับ <tfoot>

นอกจาก <thead> สำหรับหัวตารางแล้ว ยังสามารถใช้ <tfoot> สำหรับส่วนท้ายของตารางได้ด้วย เช่น การสรุปข้อมูล ดังตัวอย่าง

HTML
<table>
  <thead>
    <tr>
      <th>สินค้า</th>
      <th>จำนวน</th>
      <th>ราคา</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>สินค้า A</td>
      <td>2</td>
      <td>500 บาท</td>
    </tr>
    <tr>
      <td>สินค้า B</td>
      <td>3</td>
      <td>300 บาท</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>รวม</td>
      <td>5</td>
      <td>800 บาท</td>
    </tr>
  </tfoot>
</table>

ในตัวอย่างนี้ การใช้ <tfoot> ช่วยแสดงผลรวมของข้อมูลในตาราง แยกจากส่วนเนื้อหาเพื่อให้เห็นภาพรวมที่ชัดเจน

สรุป

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

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

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