Mission 8: Table

เป้าหมายของ Mission นี้: สร้างตารางด้วย <table> <thead> <tbody> <tr> <th> <td> และรู้ว่าควรใช้ตอนไหน

Table Structure

<table>
  <thead>          ← หัวตาราง
    <tr><th>...</th></tr>
  </thead>
  <tbody>          ← เนื้อหาตาราง
    <tr><td>...</td></tr>
  </tbody>
</table>

<tr> คือแถว, <th> คือหัวคอลัมน์ (ตัวหนา), <td> คือข้อมูลในเซลล์

เมื่อไหร่ควรใช้ table

ใช้เมื่อข้อมูลเป็นตารางจริงๆ (มีแถว-คอลัมน์ที่สัมพันธ์กัน) — ห้าม ใช้ table เพื่อจัด layout หน้าเว็บ (นั่นเป็นหน้าที่ของ Flexbox/Grid ที่จะเรียนใน Chapter 4)

Demo

<table>
  <thead>
    <tr><th>ปี</th><th>ตำแหน่ง</th></tr>
  </thead>
  <tbody>
    <tr><td>2024</td><td>Frontend Developer</td></tr>
  </tbody>
</table>