reveal.js

# ตารางและ Multimedia

หัวข้อ 5 · HTML โครงสร้างเอกสารและมาร์คอัพ

---

## แนวคิดหลัก

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

---

## Table

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

```html
<table>
  <thead>
    <tr>
      <th>สัปดาห์</th>
      <th>หัวข้อ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>บทนำเว็บ</td>
    </tr>
  </tbody>
</table>
```

---

## โครงสร้างตาราง

- `<thead>` ส่วนหัวตาราง
- `<tbody>` เนื้อหาหลักของตาราง
- `<tfoot>` ส่วนท้ายตาราง
- `<tr>` แถว
- `<th>` cell หัวข้อ
- `<td>` cell ข้อมูล

---

## `colspan` และ `rowspan`

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

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

ควรใช้เมื่อข้อมูลมีความสัมพันธ์จริง ไม่ใช่เพื่อจัด layout หน้าเว็บ

---

## Video

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

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

Attribute ที่พบบ่อย:

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

---

## Audio

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

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

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

---

## Canvas

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

```html
<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>
```

เหมาะกับกราฟ เกม ภาพวาด หรือ visualization

---

## Iframe

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

```html
<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 รายการ

---

## จบบทเรียน

<a href="/web-programming/02-html-markup/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>