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

HTML5 จัดการกับหัวตาราง Table Header

การจัดการกับ Table Header ใน HTML5 มีความสำคัญในการทำให้ข้อมูลในตารางมีโครงสร้างที่ชัดเจน และช่วยให้ผู้ใช้หรือโปรแกรมช่วยอ่าน (เช่น screen reader) สามารถเข้าใจเนื้อหาในตารางได้ง่ายขึ้น นอกจากนี้ยังช่วยให้การจัดรูปแบบด้วย CSS มีความง่ายขึ้นด้วย โดยทั่วไป Table Header จะถูกกำหนดด้วยแท็ก <th> ซึ่งใช้ร่วมกับแท็ก <table>, <thead>, และ <tbody> เพื่อสร้างโครงสร้างตารางที่ชัดเจน

การใช้ <th> ในตารางพื้นฐาน

แท็ก <th> ใช้เพื่อกำหนดหัวข้อในแต่ละคอลัมน์ของตาราง โดยปกติจะใช้ในแถวแรกของตาราง แต่สามารถใช้ที่ใดก็ได้ในตาราง

ตัวอย่าง

HTML
<table border="1">
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>ประเทศ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
    <td>ไทย</td>
  </tr>
  <tr>
    <td>จอห์น</td>
    <td>30</td>
    <td>สหรัฐอเมริกา</td>
  </tr>
</table>

ผลลัพธ์: แถวแรกจะเป็นหัวตาราง (Table Header) ซึ่งใช้แท็ก <th> และจะมีการจัดรูปแบบเป็นตัวหนาโดยอัตโนมัติ

ชื่อ อายุ ประเทศ
สมชาย 25 ไทย
จอห์น 30 สหรัฐอเมริกา

การใช้ <thead> และ <tbody> เพื่อแบ่งส่วนหัวตารางและเนื้อหาตาราง

การใช้ <thead> และ <tbody> ช่วยให้โครงสร้างตารางชัดเจนขึ้น และยังช่วยให้การจัดรูปแบบด้วย CSS หรือ JavaScript ง่ายขึ้น

ตัวอย่าง

HTML
<table border="1">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>ประเทศ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>สมชาย</td>
      <td>25</td>
      <td>ไทย</td>
    </tr>
    <tr>
      <td>จอห์น</td>
      <td>30</td>
      <td>สหรัฐอเมริกา</td>
    </tr>
  </tbody>
</table>

ในตัวอย่างนี้ <thead> จะกำหนดส่วนหัวของตาราง และ <tbody> ใช้สำหรับเนื้อหาตาราง ซึ่งทำให้แยกส่วนหัวกับเนื้อหาได้ชัดเจน

ชื่อ อายุ ประเทศ
สมชาย 25 ไทย
จอห์น 30 สหรัฐอเมริกา

การจัดหัวตารางในแนวตั้ง (Column Headers)

นอกจากการใช้หัวตารางในแนวนอนแล้ว <th> ยังสามารถใช้สำหรับหัวคอลัมน์แนวตั้งได้

ตัวอย่าง

HTML
<table border="1">
  <tr>
    <th>ข้อมูล</th>
    <th>สมชาย</th>
    <th>จอห์น</th>
  </tr>
  <tr>
    <th>อายุ</th>
    <td>25</td>
    <td>30</td>
  </tr>
  <tr>
    <th>ประเทศ</th>
    <td>ไทย</td>
    <td>สหรัฐอเมริกา</td>
  </tr>
</table>

ในตัวอย่างนี้ หัวข้อจะถูกใช้ในคอลัมน์แรก ซึ่งจะทำให้ <th> อยู่ในแนวตั้ง

ข้อมูล สมชาย จอห์น
อายุ 25 30
ประเทศ ไทย สหรัฐอเมริกา

การใช้แอตทริบิวต์ scope ใน <th>

แอตทริบิวต์ scope ใน <th> ใช้เพื่อระบุความสัมพันธ์ระหว่างหัวตารางและเซลล์ของตาราง ซึ่งมีค่าดังนี้:

  • scope="col": กำหนดหัวข้อให้กับคอลัมน์
  • scope="row": กำหนดหัวข้อให้กับแถว

ตัวอย่าง

HTML
<table border="1">
  <thead>
    <tr>
      <th scope="col">ข้อมูล</th>
      <th scope="col">สมชาย</th>
      <th scope="col">จอห์น</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">อายุ</th>
      <td>25</td>
      <td>30</td>
    </tr>
    <tr>
      <th scope="row">ประเทศ</th>
      <td>ไทย</td>
      <td>สหรัฐอเมริกา</td>
    </tr>
  </tbody>
</table>

ในตัวอย่างนี้ scope="col" กำหนดให้หัวตารางในแถวแรกเป็นหัวคอลัมน์ ส่วน scope="row" ในแถวถัดไปกำหนดให้เป็นหัวแถว

ข้อมูล สมชาย จอห์น
อายุ 25 30
ประเทศ ไทย สหรัฐอเมริกา

การรวมเซลล์ (Colspan และ Rowspan)

สามารถรวมเซลล์ในหัวตารางได้โดยใช้แอตทริบิวต์ colspan หรือ rowspan เพื่อรวมคอลัมน์หรือแถวเข้าด้วยกัน

ตัวอย่าง

HTML
<table border="1">
  <tr>
    <th colspan="2">ข้อมูลส่วนตัว</th>
  </tr>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
  </tr>
</table>

ในตัวอย่างนี้ หัวข้อ “ข้อมูลส่วนตัว” จะขยายครอบคลุม 2 คอลัมน์เนื่องจากใช้ colspan="2"

ข้อมูลส่วนตัว
ชื่อ อายุ
สมชาย 25

สรุป

การจัดการ Table Header ใน HTML5 สามารถปรับใช้งานได้หลากหลายรูปแบบ ตั้งแต่การใช้ <th> ในตารางพื้นฐาน ไปจนถึงการใช้ <thead>, <tbody>, และแอตทริบิวต์ scope เพื่อช่วยในการจัดรูปแบบและเพิ่มความสะดวกในการใช้งาน

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

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