03: Lists, Tables & Iframe

การจัดกลุ่มข้อมูลด้วยรายการ, การสร้างตารางซับซ้อน และการฝังเนื้อหาจากภายนอก

1. Lists (รายการข้อมูล)

HTML มีการจัดรายการ 3 แบบหลักๆ ที่ต้องรู้:

1. Unordered List (<ul>)

รายการแบบ "ไม่มีลำดับ" (Bullet Points)

html 
<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
</ul>
  • กาแฟ
  • ชา
2. Ordered List (<ol>)

รายการแบบ "มีลำดับตัวเลข" (1, 2, 3...)

html 
<ol>
  <li>ตื่นนอน</li>
  <li>อาบน้ำ</li>
</ol>
  1. ตื่นนอน
  2. อาบน้ำ
3. Definition List (<dl>)

รายการแบบ "คำศัพท์ - ความหมาย"

html 
<dl>
  <dt>HTML</dt>
  <dd>- ภาษาโครงสร้าง</dd>
</dl>
HTML
- ภาษาโครงสร้าง

2. Tables (ตาราง)

การสร้างตารางใน HTML ประกอบด้วยหลาย Tag ทำงานร่วมกัน (เหมือนประกอบร่างหุ่นยนต์)

โครงสร้าง: <table> (กรอบใหญ่) → <tr> (แถวแนวนอน) → <th> (หัวตาราง) หรือ <td> (ข้อมูล)
Tags & Attributes ที่ต้องใช้:
  • <thead>: ส่วนหัวตาราง (Header)
  • <tbody>: ส่วนเนื้อหา (Body)
  • <tfoot>: ส่วนท้าย (Footer - เช่น ยอดรวม)
  • <tr> (Table Row): สร้างแถวใหม่
  • <th> (Table Header): เซลล์หัวข้อ (ตัวหนา + กลาง)
  • <td> (Table Data): เซลล์ข้อมูลปกติ
Note: ปกติตารางจะไม่มีเส้นขอบ แต่จะสามารถใส่ border="1" ใน tag table ได้เพื่อดูโครงสร้าง (แต่ในงานจริงจะใช้ CSS ทำเส้นขอบแทน)
html 
<table border="1">
  <thead>
    <tr>
      <th>สินค้า</th>
      <th>ราคา</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ส้มตำ</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

การผสานเซลล์ (Merging Cells)

colspan (แนวนอน)

ใช้เมื่อต้องการผสานคอลัมน์ (Merge Columns)

html 
<tr>
  <th colspan="2">หัวข้อใหญ่</th>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
</tr>
ผลลัพธ์:
หัวข้อใหญ่ (colspan="2")
A B
rowspan (แนวตั้ง)

ใช้เมื่อต้องการผสานแถว (Merge Rows)

html 
<tr>
  <td rowspan="2">พักเที่ยง</td>
  <td>12:00</td>
</tr>
<tr>
  <td>12:30</td>
</tr>
ผลลัพธ์:
พักเที่ยง 12:00
12:30

3. Iframe (หน้าต่างซ้อน)

<iframe> คือการเจาะรูหน้าเว็บเรา เพื่อโชว์เนื้อหาจากเว็บอื่น เช่น YouTube หรือ Google Maps

วิธีฝัง YouTube
  1. เปิดคลิป YouTube ที่ต้องการ
  2. กดปุ่ม Share (แชร์) → Embed (ฝัง)
  3. Copy โค้ดที่ได้มาแปะใน HTML
Youtube Embed 
<iframe src="https://www.youtube.com/embed/..." 
  width="560" height="315" 
  frameborder="0" allowfullscreen>
</iframe>
วิธีฝัง Google Maps
  1. ค้นหาสถานที่ใน Google Maps
  2. กดปุ่ม Share → Embed a map
  3. Copy HTML มาแปะ

Workshop: แผนเที่ยวทิพย์ (Itinerary)

สร้างไฟล์ itinerary.html เพื่อวางแผนเที่ยว โดยต้องมีองค์ประกอบดังนี้:

  • 1. รายการสิ่งที่ต้องเตรียม: ใช้ ul (เช่น เสื้อผ้า, พาสปอร์ต)
  • 2. ตารางกำหนดการ: ใช้ table แสดง วัน/เวลา/กิจกรรม
    • ต้องมีการใช้ colspan (เช่น หัวข้อ "วันที่ 1")
    • หรือใช้ rowspan (เช่น พักกินข้าว 1 ชม. กินพื้นที่ 2 ช่องกิจกรรม)
  • 3. Vlog แนะนำที่เที่ยว: ฝังคลิป Youtube ที่เกี่ยวกับสถานที่นั้น
  • 4. ลิงก์กลับหน้าแรก
Practice Mission: รับงานฟรีแลนซ์ แคท คาเฟ่ มอคค่า"
บรีฟจากลูกค้า:

อยากได้เว็บหน้าเดียวช่วยทำตามรายละเอียดข้างล่างของร้าน แคท คาเฟ่ มอคค่า ให้หน่อยนะ ให้เซฟไฟล์ชื่อ meow-cafe.html

1. ส่วนหัว (Header)
  • ชื่อร้านตัวใหญ่สุด: "Cat Cafe Mocha"
  • สโลแกนใต้ชื่อร้าน (ตัวเอียง): "จิบกาแฟ แลแมวเหมียว"
  • รูปหน้าร้าน 1 รูป [Link]
  • ลิงก์เมนู 3 อันเรียงกัน: หน้าหลัก, โปรโมชั่น, จองคิว (ไม่ต้องใส่ link อะไร ใส่เป็น # แทน)
2. เมนูแนะนำ (Lists)
  • หัวข้อ (เล็กกว่าชื่อร้าน): "เมนูยอดฮิต"
  • ใช้ Ordered List เรียงลำดับ 1-3:
    1. Cat Paw Latte (ลาเต้อุ้งเท้าแมว)
    2. Tuna Sandwich
    3. Salmon Salad
  • พิเศษ: ในข้อ 1 ต้องมี List ย่อยบอกส่วนผสม (นมฮอกไกโด, ฟองนม)
3. ตารางราคา (Table)
  • สร้างตารางมีเส้นขอบ border="1"
  • ข้อมูล: ใส่รายการเครื่องดื่มอย่างน้อย 3 รายการ
ตัวอย่างตารางราคา:
ตัวอย่างตารางราคา
4. บรรยากาศ (Iframe)
  • หัวข้อ (เล็กกว่าชื่อร้าน): "บรรยากาศร้าน"
  • เขียนคำเชิญชวนสั้นๆ
  • ใส่แผนที่ Google Maps หรือ คลิป YouTube เพลงฟังสบายๆ (เลือก 1 อย่าง)
บทก่อนหน้า บทต่อไป