ใน HTML สร้างหัวตาราง (Table Header) อย่างไร

ใช้แท็ก <thead> ใน HTML เพื่อสร้างหัวตาราง แท็กนี้ใช้เพื่อเพิ่มส่วนหัวให้กับตาราง ใช้ร่วมกับ <tbody> (เนื้อหา) และ <tfoot> (ท้ายตาราง) เพื่อแบ่งส่วนตารางให้ชัดเจน

แอตทริบิวต์เพิ่มเติม (เลิกใช้งานแล้ว)

แอตทริบิวต์	ค่า	คำอธิบาย
align	right, left, center, justify, char	Deprecated - การจัดตำแหน่งภาพ
char	character	Deprecated - ระบุตัวอักษรสำหรับจัดตำแหน่ง ใช้เมื่อ align="char"
charoff	pixels หรือ %	Deprecated - ระบุออฟเซ็ตการจัดตำแหน่ง ใช้เมื่อ align="char"
valign	top, middle, bottom, baseline	Deprecated - การจัดตำแหน่งแนวตั้ง

หมายเหตุ: แอตทริบิวต์เหล่านี้ Deprecated ใน HTML5 ควรใช้ CSS แทน

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การใช้แท็ก <thead> ใน HTML:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML thead Tag</title> 
  </head> 
  <body> 
    <table style="width:100%" border="1"> 
      <thead> 
        <tr> 
          <td colspan="4">นี่คือหัวตาราง</td> 
        </tr> 
      </thead> 
      <tfoot> 
        <tr> 
          <td colspan="4">นี่คือท้ายตาราง</td> 
        </tr> 
      </tfoot> 
      <tbody> 
        <tr> 
          <td>เซลล์ 1</td> 
          <td>เซลล์ 2</td> 
          <td>เซลล์ 3</td> 
          <td>เซลล์ 4</td> 
        </tr> 
        <tr> 
          <td>เซลล์ 5</td> 
          <td>เซลล์ 6</td> 
          <td>เซลล์ 7</td> 
          <td>เซลล์ 8</td> 
        </tr> 
      </tbody> 
    </table> 
  </body> 
</html>

การใช้ <thead> ช่วยให้ตารางมีโครงสร้างชัดเจน รองรับการพิมพ์ (print) และเข้าถึงได้ (accessibility) ดีกว่า