โจทย์ที่ 1: ตารางข้อมูลส่วนตัว
คำชี้แจง: สร้างตาราง HTML แสดงข้อมูลส่วนตัวดังนี้
ข้อมูลที่ต้องแสดง:
หัวข้อ ข้อมูล
ชื่อ ป้อนชื่อของคุณ
ชั้น ม.5/3
โรงเรียน กุดดินจี่พิทยาคม
งานอดิเรก ฟังเพลง, อ่านหนังสือ
✅ คำแนะนำ:
ใช้ <th> สำหรับหัวข้อ
ใช้ <td> สำหรับข้อมูล
โจทย์ที่ 2: ตารางตารางเรียนรายวัน
คำชี้แจง: สร้างตารางแสดงตารางเรียนวันจันทร์ถึงศุกร์ ช่วงเวลา 08.30–15.30 น.
ตัวอย่างข้อมูล:
เวลา จันทร์ อังคาร พุธ พฤหัสฯ ศุกร์
08.30–09.30 คณิตศาสตร์ วิทยาศาสตร์ ภาษาอังกฤษ สังคม สุขศึกษา
09.30–10.30 ... ... ... ... ...
✅ คำแนะนำ:
ให้ใส่ <thead> และ <tbody> ด้วยถ้าเป็นไปได้
เพิ่ม border="1" เพื่อให้มองเห็นตารางชัดเจน
โจทย์ที่ 3: ตารางผลคะแนนนักเรียน (มี colspan)
คำชี้แจง: สร้างตารางแสดงคะแนนนักเรียน 3 วิชา โดยมีหัวข้อหลัก “คะแนนรวม” ที่รวม 3 รายวิชาไว้ด้านล่าง
ชื่อ คณิต วิทย์ อังกฤษ คะแนนรวม
สมชาย 80 75 90 245
สมหญิง 85 70 80 235
✅ เพิ่มเติม:
เพิ่มแถวสรุปผลด้านล่าง โดยใช้ colspan=4 เขียนว่า "เฉลี่ยรวมทั้งหมด" แล้วให้แสดงค่าเฉลี่ยรวมในช่องสุดท้าย
โจทย์ที่ 4: ตารางเมนูอาหาร (ใช้ rowspan)
คำชี้แจง: แสดงเมนูอาหารแต่ละวัน โดยมีบางรายการเหมือนกันทุกวัน เช่น ข้าวสวย
วัน อาหารหลัก เครื่องดื่ม
จันทร์ ข้าวสวย น้ำเปล่า
อังคาร ข้าวสวย น้ำผลไม้
พุธ ข้าวสวย น้ำชา
✅ คำแนะนำ:
ให้ใช้ rowspan=3 กับ "ข้าวสวย" ในคอลัมน์ "อาหารหลัก"
โจทย์ที่ 5: ตารางราคาสินค้า (จัดกึ่งกลาง)
คำชี้แจง: สร้างตารางแสดงรายการสินค้า, จำนวน, และราคาต่อชิ้น พร้อมคำนวณราคารวม
รายการสินค้า จำนวน ราคาต่อหน่วย ราคารวม
สมุด 3 20 60
ปากกา 5 10 50
✅ คำแนะนำ:
จัดกึ่งกลางข้อความด้วย align="center" หรือใช้ CSS เช่น text-align: center;
โจทย์ที่ 6: ตารางเปรียบเทียบแพ็กเกจอินเทอร์เน็ต (ความคิดสร้างสรรค์)
คำชี้แจง: ให้นักเรียนออกแบบตารางเปรียบเทียบแพ็กเกจอินเทอร์เน็ต 3 แบบ โดยมีข้อมูล เช่น ความเร็ว, ราคา, โปรโมชั่น, ความคุ้มค่า
✅ แนวทาง:
เปิดให้ตกแต่งตารางได้เต็มที่
ใช้ CSS (inline หรือ internal) ได้
เพิ่มหัวตารางแบบ <caption> ได้ เช่น <caption>แพ็กเกจอินเทอร์เน็ต</caption>
ส่งงานโดยสร้างในโฟลเดอร์ของตัวเอง
ตั้งโฟลเดอร์ ชื่อ "แบบฝึกหัดตาราง"
ตั้งชื่อไฟล์ "work1" , "work2" ตามเลขข้อของโจทย์