Basic Content Tags

1. หัวข้อนี้คืออะไร

ตาราง (Table) ใช้แสดงข้อมูลที่ต้องเทียบกันเป็นแถวและคอลัมน์ แท็กหลักที่ต้องรู้: - table = กรอบตาราง - tr = แถว - th = หัวตาราง - td = ข้อมูลในเซลล์

2. วิธีใช้ให้ถูกบทบาท

• 1) เริ่มจาก table เป็นโครงหลัก
• 2) ใส่แถวหัวตารางด้วย tr และ th
• 3) เพิ่มแถวข้อมูลด้วย tr และ td
• 4) ให้จำนวนคอลัมน์ในแต่ละแถวสอดคล้องกัน
• 5) ใช้ table กับข้อมูลเชิงตาราง ไม่ใช้จัด layout หน้าเว็บ

3. colspan และ rowspan ใช้เมื่อไร

หลักจำง่าย: colspan = กินแนวนอน, rowspan = กินแนวตั้ง

4. ตัวอย่างโค้ดสั้นที่ใช้จริง

<table>
  <tr>
    <th colspan="3">ตารางเรียน</th>
  </tr>
  <tr>
    <th>วัน</th>
    <th>วิชา</th>
    <th>เวลา</th>
  </tr>
  <tr>
    <td rowspan="2">จันทร์</td>
    <td>HTML</td>
    <td>09:00</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>10:00</td>
  </tr>
</table>

5. จุดที่มักพลาด

• ใช้ td ในแถวหัวแทน th
• กำหนด colspan/rowspan ไม่ตรงกับจำนวนช่องจริง
• จำนวนช่องในแต่ละแถวไม่สัมพันธ์กัน
• ใช้ table จัดเลย์เอาต์แทนการใช้ semantic HTML + CSS

6. สรุปจำเร็ว

• table/tr/th/td คือแกนหลักของตาราง
• แถวหัวใช้ th, แถวข้อมูลใช้ td
• colspan รวมคอลัมน์, rowspan รวมแถว
• ใช้ตารางเพื่อสื่อข้อมูลเชิงเปรียบเทียบให้ชัดเจน

10. Lab 1: สร้างตารางพื้นฐาน

เป้าหมาย: สร้าง table พื้นฐานให้ครบหัวตารางและข้อมูล โจทย์: ใน section#score-area สร้าง table#score-table โดยมีหัวตาราง 2 ช่อง (ชื่อวิชา, คะแนน) และข้อมูล 2 แถว (HTML, 90), (CSS, 85)

10. Lab 2: เพิ่มข้อมูลหลายคอลัมน์

เป้าหมาย: สร้างตาราง 3 คอลัมน์พร้อมข้อมูลหลายแถว โจทย์: ใน article#price-area สร้าง table#price-table หัวตาราง (คอร์ส, ระยะเวลา, ราคา) และข้อมูล 3 แถวตามคำอธิบายในโจทย์

10. Lab 3: แก้โครงสร้าง th/td

เป้าหมาย: ซ่อมตารางที่ใช้แท็กผิดบทบาท โจทย์: แถวหัวต้องเป็น th ทั้งหมด และแถวข้อมูลต้องเป็น td ทั้งหมด โดยคงข้อความเดิมไว้

10. Lab 4: ใช้ colspan รวมคอลัมน์

เป้าหมาย: ใช้ colspan ให้หัวตารางกินหลายคอลัมน์ โจทย์: สร้าง table#score-table โดยแถวแรกเป็น <th colspan="2">คะแนนรายวิชา</th> และมีข้อมูล HTML 80, CSS 90

10. Lab 5: ใช้ rowspan รวมแถว

เป้าหมาย: ใช้ rowspan ให้ช่องข้อมูลกินลงหลายแถว โจทย์: สร้าง table#group-table ที่มี td ข้อความ "เครื่องเขียน" และต้องใช้ rowspan="2"

10. Lab 6: ใช้ colspan + rowspan ร่วมกัน

เป้าหมาย: ซ่อมตารางให้ใช้ทั้ง colspan และ rowspan ได้ถูกต้อง โจทย์: แก้ table#schedule-table ให้แถวแรกเป็น <th colspan="3">ตารางเรียน</th> และมี td rowspan="2" สำหรับคำว่า "จันทร์"