หัวข้อ 5: ตารางและ Multimedia

แนวคิดหลัก

HTML ไม่ได้มีเพียงข้อความและรูปภาพ แต่ยังรองรับตาราง วิดีโอ เสียง พื้นที่วาดภาพ และการฝังเนื้อหาจากภายนอก การเลือกใช้ tag ให้เหมาะสมช่วยให้ข้อมูลซับซ้อนแสดงผลได้ดีขึ้น

Table

ตารางใช้แสดงข้อมูลแบบแถวและคอลัมน์ เช่น ตารางเรียน ตารางราคา หรือสรุปคะแนน

<table>
  <thead>
    <tr>
      <th>สัปดาห์</th>
      <th>หัวข้อ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>บทนำเว็บ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>HTML</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">รวม 15 สัปดาห์</td>
    </tr>
  </tfoot>
</table>

โครงสร้างสำคัญ:

1. <thead> ส่วนหัวตาราง
2. <tbody> เนื้อหาหลักของตาราง
3. <tfoot> ส่วนท้ายตาราง
4. <tr> แถว
5. <th> cell หัวข้อ
6. <td> cell ข้อมูล

colspan และ rowspan

colspan ใช้รวมหลายคอลัมน์ ส่วน rowspan ใช้รวมหลายแถว

<td colspan="2">รวมสองคอลัมน์</td>
<td rowspan="3">รวมสามแถว</td>

Video

<video> ใช้ฝังวิดีโอ

<video src="lesson.mp4" controls autoplay loop muted width="640"></video>

attribute ที่พบบ่อย:

1. controls: แสดงปุ่มควบคุม
2. autoplay: เล่นอัตโนมัติ
3. loop: เล่นวนซ้ำ
4. muted: ปิดเสียง

หมายเหตุ: browser หลายตัวอนุญาต autoplay เมื่อวิดีโอ muted เท่านั้น

Audio

<audio> ใช้ฝังไฟล์เสียง

<audio src="lecture.mp3" controls></audio>

ควรใส่ controls เพื่อให้ผู้ใช้เล่น หยุด หรือปรับเสียงได้

Canvas

<canvas> เป็นพื้นที่สำหรับวาดภาพด้วย JavaScript ผ่าน 2D Context API

<canvas id="chart" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById("chart");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "steelblue";
  ctx.fillRect(20, 20, 120, 60);
</script>

Canvas เหมาะกับกราฟ เกม ภาพวาด หรือ visualization ที่ต้องควบคุมด้วย JavaScript

Iframe

<iframe> ใช้ฝังเนื้อหาจากภายนอก เช่น Google Maps, YouTube หรือหน้าเว็บอื่น

<iframe
  src="https://www.youtube.com/embed/video_id"
  title="วิดีโอบทเรียน HTML"
  width="560"
  height="315"
  allowfullscreen>
</iframe>

ควรใส่ title เพื่อ accessibility และระวังเนื้อหาภายนอกที่อาจกระทบ performance หรือ security

กิจกรรม

สร้างหน้า “ตารางเรียนรายวิชา” ที่มี table พร้อม thead, tbody, tfoot และฝังวิดีโอแนะนำรายวิชา 1 รายการ

แบบทดสอบหลังเรียน

1. <th> และ <td> ต่างกันอย่างไร
2. colspan ใช้ทำอะไร
3. ทำไมวิดีโอ autoplay มักต้องใช้ร่วมกับ muted
4. <canvas> ต้องใช้ภาษาใดช่วยวาดภาพ
5. <iframe> เหมาะกับการฝังเนื้อหาแบบใด

กลับสัปดาห์ที่ 2