คำนำ ชดุ การเรียนรู้ หน่วยท่ี 4 การสร้างตาราง เน้ือหาภายในประกอบไปดว้ ยคาชแ้ี จงสาหรับครู คาช้แี จงสาหรบั นักเรยี น ผลการเรยี นรู้ จดุ ประสงค์การเรียนรู้ ระยะเวลาในการเรียนรู้ ใบความรู้ ใบงาน ซง่ึ นกั เรยี นสามารถใช้เอกสารเล่มนี้ควบคู่กับการเรียนได้ เพ่ือลดขัน้ ตอนในการจดสรปุ เนอื้ หาทเ่ี รยี นและสามารถนาไปทบทวนนอกห้องเรียนได้ เม่ือนักเรยี นศกึ ษา คน้ ควา้ ทาความเข้าใจ ฝกึ ปฏบิ ตั ติ ามชุดการเรยี นรู้แลว้ จะสามารถ ชว่ ยลดปญั หาความแตกต่างกันของนักเรยี นท้ังด้านความรู้พ้ืนฐาน ความสามารถในการเรียนรู้และ ทักษะการใช้คอมพิวเตอร์ สร้างมาตรฐานการเรยี นใหผ้ เู้ รียนไดเ้ รยี นรูเ้ นื้อหาเท่าเทียมกนั ช่วยลด ภาระครูผู้สอนในการกากบั ดแู ลชน้ั เรียนท่ีมนี กั เรียนจานวนมาก โดยครสู ามารถนาเวลาไปดแู ล นักเรยี นที่เรียนรู้ชา้ เป็นพเิ ศษได้ โดยไมร่ บกวนการเรียนรูข้ องชั้นเรียน อกี ทั้งเป็นการสง่ เสริมการ เรยี นรู้ตามอัธยาศัย นกั เรียนสามารถเรยี นร้ตู ามความสามารถของตน ทบทวนฝกึ ฝนเพิ่มเตมิ นอก เวลาเรียน ไมจ่ ากดั สถานทแ่ี ละเวลา สามารถแกป้ ญั หาให้กับนักเรยี นที่ ไม่ผ่านการประเมิน จดุ ประสงค์การเรียนรู้ ขอขอบคุณผบู้ รหิ ารโรงเรยี นโพธิสมั พนั ธ์พิทยาคาร ผู้เช่ยี วชาญ พ่ีๆ น้องๆ และเพ่ือนครู ทุกทา่ นท่ีให้ความอนเุ คราะห์ตรวจสอบเอกสาร ให้คาแนะนา และกาลังใจทด่ี ีตลอดมา ข้าพเจา้ หวังเปน็ อย่างยงิ่ ว่าชดุ การเรียนรหู้ นว่ ยที่ 4 การสร้างตาราง จะเปน็ ประโยชนต์ อ่ การพัฒนาการศึกษา และจุดประกายความคดิ ของนกั เรียน อีกทงั้ พฒั นานกั เรยี นให้เป็นผมู้ คี ุณภาพ มากย่งิ ข้นึ นงลกั ษณ์ วาสะศิริ
สำรบัญ 1 4 คาช้ีแจงสาหรับครู 6 คาชี้แจงสาหรบั นักเรยี น 6 ผลการเรียนรู้ 7 จดุ ประสงค์การเรียนรู้ 8 ระยะเวลาในการเรียนรู้ 14 ใบความรู้ท่ี 1 เร่อื ง การสร้างตาราง 16 ใบงานท่ี 1 เรือ่ ง การสร้างตาราง 23 ใบความรู้ที่ 2 เรื่อง ตกแตง่ ตาราง ตอนท่ี 1 25 ใบงานที่ 2 เรอ่ื ง ตกแตง่ ตาราง ตอนที่ 1 36 ใบความรทู้ ี่ 3 เรื่อง ตกแต่งตาราง ตอนท่ี 2 38 ใบงานที่ 3 เรือ่ ง ตกแต่งตาราง ตอนที่ 2 47 ใบความรู้ท่ี 4 เรือ่ ง ตกแต่งช่องในตาราง ใบงานท่ี 4 เรื่อง ตกแตง่ ช่องในตาราง
หน้าที่ 1 คำชี้แจงสำหรับครู 1. ศึกษาแผนการจดั การเรยี นรใู้ ห้เขา้ ใจ ซึ่งประกอบด้วยผลการเรียนรู้ สาระสาคญั จุดประสงค์การเรียนรู้ สาระการเรียนรู้ กิจกรรมการเรยี นรู้ สื่อการเรียนการสอน การวดั ผล ประเมนิ ผลการเรียนรู้ 2. ศกึ ษาคู่มอื การใช้ชุดการเรียนรู้ 3. อธบิ ายและชี้แจงใหน้ ักเรียนอา่ นคาชีแ้ จงสาหรบั นักเรียนอยา่ งละเอียด และปฏิบัติตาม ข้นั ตอนจนจบในแต่ละหน่วย 4. แบ่งกลุม่ นักเรียน โดยให้ภายในกลมุ่ มสี มาชกิ ประมาณ 4-5 คน และชีแ้ จงให้นักเรียน ทราบวา่ ขณะนกั เรยี นศกึ ษาชดุ การเรียนรู้ นกั เรียนสามารถถามเพอื่ นหรือช่วยเหลือกันภายในกลมุ่ ได้ 5. ชีแ้ จงให้นกั เรยี นทราบวา่ นกั เรียนสามารถใช้เอกสารประกอบการเรยี นเล่มนีบ้ นั ทึกสรุป ความรูค้ วบคู่ไปกับการฝึกปฏิบตั ิได้ (เพือ่ ลดข้นั ตอนในการจดสรุปเนือ้ หาทเ่ี รียนและสามารถนาไป ทบทวนนอกห้องเรียนได)้ 6. การประเมินผลจะพิจารณาจากคะแนนแบบฝึกหัดรวมกับคะแนนใบงาน โดยถา้ นักเรียนได้ - คะแนนร้อยละ 80 ขนึ้ ไป ผ่านเกณฑ์อย่ใู นระดบั ดมี าก - คะแนนรอ้ ยละ 70-79 ผ่านเกณฑ์อยใู่ นระดบั ดี - คะแนนรอ้ ยละ 60-69 ผา่ นเกณฑ์อยใู่ นระดบั พอใช้ - คะแนนน้อยกวา่ ร้อยละ 60 ไมผ่ ่านเกณฑ์อยู่ในระดบั ปรับปรุง 7. ใหน้ กั เรยี นทาตามขนั้ ตอนดงั นี้ ชั่วโมงที่ 1-2 7.1 ศึกษาเนื้อหาในชุดการเรียนรู้ตามหวั ข้อดังน้ี (ใบความร้ทู ี่ 1 เรอื่ ง การสรา้ งตาราง) - การใชค้ าสั่งสรา้ งตาราง - การใช้คาสั่งกาหนดเสน้ ขอบของตาราง - การใช้คาส่งั กาหนดความหนาของเส้นระหวา่ งชอ่ งตาราง 7.2 ให้นกั เรียนฝึกปฏิบัตติ ามใบความรู้ เมื่อพบปัญหาใหป้ รึกษาและขอคาแนะนาจาก เพอื่ นในกลมุ่ ก่อน แต่ถ้าไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครไู ด้ 7.3 ทาใบงานท่ี 1 ด้วยตนเอง 7.4 เมอื่ ทาเสรจ็ แล้วให้ประธานกลมุ่ รวบรวมส่งครู
หน้าที่ 2 ชว่ั โมงท่ี 3-4 7.5 ศกึ ษาเน้ือหาในชดุ การเรียนรตู้ ามหวั ขอ้ ดังนี้ (ใบความรู้ที่ 2 เร่อื ง การตกแต่งตาราง ตอนที่ 1) - การใช้คาสัง่ กาหนดสีของเส้นขอบตาราง - การใช้คาสงั่ กาหนดความกว้างและความสงู ของตาราง - การใชค้ าสั่งกาหนดตาแหนง่ ของตาราง - การใชค้ าสงั่ กาหนดเว้นระยะขอบภายในชอ่ งตาราง 7.6 ให้นกั เรียนฝกึ ปฏิบตั ิตามใบความรู้ เม่ือพบปัญหาใหป้ รึกษาและขอคาแนะนาจาก เพอื่ นในกลุ่มก่อน แต่ถ้าไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครูได้ 7.7 ทาใบงานท่ี 2 ดว้ ยตนเอง 7.8 เม่อื ทาเสรจ็ แลว้ ให้ประธานกล่มุ รวบรวมส่งครู ชั่วโมงท่ี 5-6 7.9 ศกึ ษาเนื้อหาในชดุ การเรียนรูต้ ามหวั ขอ้ ดังน้ี (ใบความรู้ที่ 3 เร่ือง การตกแต่งตาราง ตอนท่ี 2) - การใช้คาสั่งกาหนดสีพน้ื ของตาราง - การใช้คาสั่งกาหนดรูปภาพเปน็ พ้ืนหลงั ของตาราง - การใช้คาสงั่ รวมช่องตารางตามแนวแถว - การใช้คาสัง่ รวมชอ่ งตารางตามแนวคอลัมน์ 7.10 ให้นักเรียนฝึกปฏบิ ัติตามใบความรู้ เม่ือพบปญั หาให้ปรกึ ษาและขอคาแนะนาจาก เพื่อนในกลมุ่ ก่อน แต่ถา้ ไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครูได้ 7.11 ทาใบงานที่ 3 ด้วยตนเอง 7.12 เม่ือทาเสร็จแล้วให้ประธานกลุ่มรวบรวมส่งครู ในตาราง) ช่ัวโมงท่ี 7-8 7.13 ศึกษาเนอ้ื หาในชุดการเรียนรตู้ ามหัวขอ้ ดังน้ี (ใบความรทู้ ี่ 4 เรือ่ ง การตกแตง่ ช่อง - การใช้คาสั่งกาหนดตาแหนง่ ของข้อมลู ในชอ่ งตาราง - การใช้คาส่ังกาหนดสภี ายในช่องตาราง - การใช้คาสง่ั กาหนดสตี วั อักษรภายในชอ่ งตาราง - การใช้คาสงั่ กาหนดรูปภาพภายในช่องตาราง
หนา้ ที่ 3 7.14 ใหน้ ักเรียนฝึกปฏบิ ัติตามใบความรู้ เม่ือพบปัญหาให้ปรึกษาและขอคาแนะนาจาก เพ่อื นในกลมุ่ กอ่ น แต่ถ้าไม่เข้าใจสามารถปรึกษาและขอคาแนะนาจากครไู ด้ 7.15 ทาใบงานที่ 4 ดว้ ยตนเอง 7.16 เม่อื ทาเสรจ็ แลว้ ให้ประธานกลมุ่ รวบรวมส่งครู
หนา้ ที่ 4 คำชี้แจงสำหรับนักเรียน 1. ชุดการเรยี นรู้ไดร้ บั การวางแผนออกแบบอย่างเปน็ ระบบ นกั เรยี นควรศึกษาคาแนะนาการ ใชบ้ ทเรยี น สาระการเรียนรู้ สาระสาคญั ผลการเรยี นรู้ จุดประสงคก์ ารเรียนรู้ จากคู่มอื การใช้ บทเรยี น 2. ชุดการเรยี นรู้ประกอบด้วย ผลการเรยี นรู้ จดุ ประสงค์การเรียนรู้ ระยะเวลาในการเรยี นรู้ เนือ้ หา ภาพประกอบ กจิ กรรมระหวา่ งเรียน 3. นักเรียนสามารถใช้ชดุ การเรยี นรู้เลม่ น้ีบนั ทกึ สรปุ ความรู้ได้ 4. ขณะทีน่ ักเรียนศึกษาในชดุ การเรียนรู้ ควรศึกษาเน้อื เรยี งตามลาดับ เนอ่ื งจากชุดการ เรยี นรไู้ ดอ้ อกแบบให้ศึกษาเน้ือหาในหัวข้องา่ ยไปหวั ขอ้ ยาก 5. หลังจากศึกษาเน้ือหาในแต่ละหัวขอ้ จบแล้ว ใหน้ ักเรียนฝึกปฏบิ ตั ิตามในแตล่ ะหัวข้อ เม่อื พบปญั หาใหป้ รึกษาและขอคาแนะนาจากเพื่อนในกลุ่มกอ่ น แต่ถา้ ไม่เขา้ ใจสามารถปรกึ ษาและ ขอคาแนะนาจากครไู ด้ 6. ขณะศึกษาในชดุ การเรยี นรู้ให้นกั เรียนปฏิบตั ิตามข้ันตอนดังน้ี ชว่ั โมงที่ 1-2 6.1 ศกึ ษาเนื้อหาในชดุ การเรียนรู้ตามหัวข้อดังนี้ (ใบความรทู้ ่ี 1 เรื่อง การสร้างตาราง) - คาสงั่ สร้างตาราง - การใช้คาสั่งกาหนดเสน้ ขอบของตาราง - การใชค้ าสง่ั กาหนดความหนาของเส้นระหว่างชอ่ งตาราง 6.2 นกั เรยี นฝกึ ปฏบิ ตั ติ ามใบความรู้ เมื่อพบปัญหาใหป้ รึกษาและขอคาแนะนาจาก เพอื่ นภายในกลมุ่ ก่อนปรึกษาครู 6.3 บนั ทึกสรปุ ความรู้ท่ีไดล้ งในสมุดหรือในเอกสารประกอบการเรียนเลม่ นี้ 6.4 ทาใบงานที่ 1 ด้วยตนเอง 6.5 เม่อื ทาเสรจ็ แล้วให้ประธานกลุ่มรวบรวมส่งครู ตอนที่ 1) ชว่ั โมงที่ 3-4 6.6 ศึกษาเน้ือหาในชดุ การเรียนรูต้ ามหวั ขอ้ ดังนี้ (ใบความร้ทู ี่ 2 เร่ือง การตกแต่งตาราง - การใช้คาสงั่ กาหนดสีของเส้นขอบตาราง - การใชค้ าส่งั กาหนดความกว้างและความสงู ของตาราง - การใชค้ าสง่ั กาหนดตาแหน่งของตาราง
หนา้ ท่ี 5 - การใชค้ าสัง่ กาหนดเวน้ ระยะขอบภายในชอ่ งตาราง 6.3 นักเรยี นฝกึ ปฏิบตั ิตามใบความรู้ เม่อื พบปัญหาให้ปรึกษาและขอคาแนะนาจากเพ่ือน ภายในกลมุ่ ก่อนปรกึ ษาครู 6.4 บนั ทึกสรปุ ความรทู้ ี่ได้ลงในสมุดหรือในเอกสารประกอบการเรยี นเล่มน้ี 6.5 ทาใบงานที่ 2 ดว้ ยตนเอง 6.6 เมื่อทาเสร็จแล้วให้ประธานกลุ่มรวบรวมส่งครู ชั่วโมงท่ี 5-6 6.7 ศกึ ษาเน้ือหาในชุดการเรียนรูต้ ามหัวขอ้ ดังน้ี (ใบความรทู้ ี่ 3 เร่อื ง การตกแต่งตาราง ตอนท่ี 2) - การใชค้ าสง่ั กาหนดสีพ้ืนของตาราง - การใช้คาสั่งกาหนดรปู ภาพเปน็ พืน้ หลงั ของตาราง - การใชค้ าส่งั รวมชอ่ งตารางตามแนวแถว - การใช้คาสง่ั รวมชอ่ งตารางตามแนวคอลัมน์ 6.8 นกั เรียนฝึกปฏิบัติตามใบความรู้ เมื่อพบปัญหาให้ปรึกษาและขอคาแนะนาจากเพื่อน ภายในกลุม่ ก่อนปรึกษาครู 6.9 บนั ทกึ สรปุ ความรูท้ ี่ได้ลงในสมุดหรือในเอกสารประกอบการเรยี นเล่มนี้ 6.10 ทาใบงานที่ 3 ดว้ ยตนเอง 6.11 เมอ่ื ทาเสร็จแล้วให้ประธานกล่มุ รวบรวมส่งครู ชว่ั โมงท่ี 7-8 6.12 ศกึ ษาเนื้อหาในชุดการเรยี นรู้ตามหวั ข้อดังนี้ (ใบความรู้ที่ 4 เร่อื ง การตกแต่งช่อง ตาราง) - การใช้คาสั่งกาหนดตาแหนง่ ของขอ้ มูลในช่องตาราง - การใชค้ าสง่ั กาหนดสีภายในช่องตาราง - การใช้คาสัง่ กาหนดสีตวั อกั ษรภายในช่องตาราง - การใชค้ าสง่ั กาหนดรูปภาพภายในชอ่ งตาราง 6.13 นกั เรยี นฝึกปฏิบตั ิตามใบความรู้ เมอื่ พบปญั หาใหป้ รึกษาและขอคาแนะนาจาก เพอื่ นภายในกล่มุ ก่อนปรึกษาครบู ันทกึ สรปุ ความร้ทู ่ไี ดล้ งในสมุดหรือในเอกสารประกอบการเรยี น เลม่ น้ี 6.14ทาใบงานที่ 4 ด้วยตนเอง 6.15 เมื่อทาเสรจ็ แลว้ ให้ประธานกลุม่ รวบรวมส่งครู
หนา้ ที่ 6 ผลกำรเรียนรู้ 1. อธิบายการใช้คาสัง่ ในภาษา HTML ได้ 2. ใช้คาส่งั ในภาษา HTML ได้ จดุ ประสงคก์ ารเรยี นรู้ 1. อธบิ ายวิธีการใชค้ าสง่ั สร้างตารางได้ (K) 2. อธบิ ายวธิ ีการใช้คาสั่งกาหนดเสน้ ขอบของตารางได้ (K) 3. อธบิ ายวธิ ีการใช้คาสัง่ กาหนดความหนาของเส้นระหว่างช่องตารางได้ (K) 4. อธบิ ายวธิ ีการใชค้ าสั่งสีของเส้นขอบตารางได้ (K) 5. อธิบายวิธีการใช้คาสัง่ กาหนดความกว้างและความสงู ของตารางได้ (K) 6. อธิบายวิธีการใชค้ าส่งั กาหนดตาแหนง่ ของตารางได้ (K) 7. อธิบายวิธีการใชค้ าสั่งกาหนดเว้นระยะขอบภายในช่องตารางได้ (K) 8. อธิบายวิธีการใชค้ าสัง่ กาหนดสีพืน้ ของตารางได้ (K) 9. อธิบายวธิ ีการใชค้ าสั่งกาหนดรูปภาพเปน็ พนื้ หลังของตารางได้ (K) 10. อธบิ ายวธิ ีการใช้คาสง่ั รวมชอ่ งตารางตามแนวแถวได้ (K) 11. อธบิ ายวธิ ีการใช้คาส่งั การรวมช่องตารางตามแนวคอลัมน์ได้ (K) 12. อธบิ ายวิธีการใช้คาสง่ั กาหนดตาแหนง่ ของข้อมลู ภายในช่องตารางได้ (K) 13. อธิบายวิธีการใช้คาส่งั กาหนดสภี ายในช่องตารางได้ (K) 14. อธิบายวธิ ีการใช้คาสั่งกาหนดสีตัวอกั ษรภายในชอ่ งตารางได้ (K) 15. อธิบายวิธีการใช้คาสง่ั กาหนดรูปภาพภายในช่องตารางได้ (K) 16. ใช้คาส่ังสรา้ งตารางได้ (P) 17. ใช้คาสัง่ กาหนดเส้นขอบของตารางได้ (P)
หนา้ ที่ 7 18. ใชค้ าสง่ั กาหนดความหนาของเส้นระหว่างชอ่ งตารางได้ (P) 19. ใชค้ าสง่ั สขี องเส้นขอบตารางได้ (P) 20. ใช้คาสง่ั กาหนดความกวา้ งและความสูงของตารางได้ (P) 21. ใช้คาส่งั กาหนดตาแหน่งของตารางได้ (P) 22. ใชค้ าสง่ั กาหนดเวน้ ระยะขอบภายในชอ่ งตารางได้ (P) 23. ใชค้ าสง่ั กาหนดสีพื้นของตารางได้ (P) 24. ใชค้ าสั่งกาหนดรปู ภาพเป็นพนื้ หลังของตารางได้ (P) 25. ใชค้ าส่ังรวมชอ่ งตารางตามแนวแถวได้ (P) 26. ใชค้ าสั่งการรวมชอ่ งตารางตามแนวคอลมั นไ์ ด้ (P) 27. ใช้คาสั่งกาหนดตาแหน่งของข้อมูลภายในชอ่ งตารางได้ (P) 28. ใชค้ าสง่ั กาหนดสีภายในชอ่ งตารางได้ (P) 29. ใชค้ าสั่งกาหนดสตี ัวอกั ษรภายในชอ่ งตารางได้ (P) 30. ใชค้ าสง่ั กาหนดรูปภาพภายในช่องตารางได้ (P) 31. มีเจตคติท่ดี ตี ่อการเรียนวชิ าคอมพวิ เตอร์ 3 (A) ระยะเวลาในการเรยี นรู้ จานวน 8 ช่วั โมง
หนา้ ที่ 8 ใบความรู้ท่ี 1 เรือ่ ง การสรา้ งตาราง หนว่ ยการเรียนที่ 4 ตาราง กิจกรรมทบทวนความรู้เดมิ ใหน้ กั เรยี นทบทวนความรเู้ ดิม โดยฝึกใช้คาส่ังแทรกรูปภาพ กาหนดความกวา้ งความสงู ของรูปภาพเป็นพกิ เซลและเปอรเ์ ซน็ ต์ กาหนด รูปภาพให้อยกู่ ึ่งกลางหน้าจอ กาหนดเสน้ กรอบให้รูปภาพ กาหนดพื้นหลงั เอกสารใหเ้ ปน็ รูปภาพ ขณะทบทวนสามารถถามเพื่อนในกลุ่มได้ และเมื่อ ทบทวนจนเข้าใจแล้ว ใหน้ ักเรยี นศึกษาหัวข้อตอ่ ไป การแสดงผลข้อมูลตารางบนเว็บเพจสามารถประยุกต์ใช้งานไดห้ ลายรปู แบบ เชน่ การแสดง คา่ ตวั เลข การแสดงการเปรยี บเทียบ และสามารถใช้ตารางช่วยในการออกแบบเว็บเพจได้ ซึง่ บางครั้ง อาจมองไม่รเู้ ลยว่าเว็บเพจนั้นใช้คาส่ังสร้างตาราง คาสัง่ สรา้ งตาราง งงง รปู แบบ <TABLE> <CAPTION>ช่ือหัวตาราง</CAPTION> <TR> <TH>ข้อความ</TH><TH>ขอ้ ความ</TH><TH>…..</TH>….. </TR> <TR> <TD>ขอ้ ความ</TD><TD>ข้อความ</TD><TD>…..</TD>….. </TR> …………. …………. </TABLE>
หนา้ ท่ี 9 โครงสรา้ งของตารางประกอบดว้ ยแถวและคอลัมน์ โดยขอ้ มูลทอี่ ยู่ในแนวนอนจะเรียกวา่ แถว ข้อมลู ที่อยู่แนวตง้ั เรยี กวา่ คอลัมน์ คาส่ังท่ีใช้ในการสร้างตารางมดี ังนี้ <TABLE>.....</TABLE> เปน็ คาสงั่ ทใี่ ช้กาหนดขอบเขตการสร้างตาราง <CAPTION>.....</CAPTION> เป็นคาสง่ั ท่ีใชก้ าหนดข้อความอธิบายตาราง <TR>.....</TR> เป็นคาส่งั ท่ีใชก้ าหนดแถวของตาราง <TH>.....</TH> เป็นคาส่งั ที่ใช้กาหนดข้อความของหัวคอลมั น์ <TD>.....</TD> เป็นคาส่ังที่ใชก้ าหนดข้อความภายในคอลัมน์ ตัวอย่างการใช้งาน <table> <caption>จานวนนักเรยี นระดบั ช้นั มัธยมศึกษาตอนต้น</caption> <tr> <th>ระดับช้นั </th><th>หญิง</th><th>ชาย</th><th>รวม</th> </tr> <tr> <td>มธั ยมศกึ ษาปีท่ี 1</td><td>25</td><td>22</td><td>47</td> </tr> <tr> <td>มธั ยมศึกษาปีท่ี 2</td><td>28</td><td>22</td><td>50</td> </tr> <tr> <td>มัธยมศึกษาปีท่ี 3</td><td>17</td><td>25</td><td>42</td> </tr> </table>
หนา้ ท่ี 10
หน้าที่ 11 กิจกรรมระหวา่ งเรยี น ใหน้ ักเรียนฝกึ ใชค้ าส่งั สร้างตาราง ขณะฝกึ ปฏิบตั สิ ามารถถามเพื่อน ในกลุ่มได้ และเม่อื ฝกึ ปฏิบัติจนเขา้ ใจแลว้ ใหน้ ักเรียนศึกษาหวั ข้อต่อไป สังเกตว่าเมอื่ ใชค้ าสัง่ สร้างตาราง เมือ่ แสดงบนเวบ็ เบราวเ์ ซอร์เส้นตารางจะยงั ไม่แสดง ถา้ ตอ้ งการใหเ้ ส้นตารางแสดงต้องกาหนดเสน้ ขอบของตาราง
หนา้ ที่ 12 คาสงั่ กาหนดเส้นขอบของตาราง การกาหนดเสน้ ขอบของตารางเปน็ คาสง่ั ทใ่ี ช้กาหนดลกั ษณะพเิ ศษเพม่ิ เติมใหก้ บั คาส่งั <TABLE> ซง่ึ คาสงั่ ท่ใี ชก้ าหนดเสน้ ขอบของตารางคือ BORDER รูปแบบ <TABLE BORDER=“คา่ ตวั เลขความหนาของเส้นขอบ” ตัวอย่างการใชง้ าน กิจกรรมระหว่างเรียน ใหน้ ักเรียนฝึกใชค้ าสง่ั กาหนดเสน้ ขอบของตาราง ขณะฝึกปฏบิ ัติ สามารถถามเพื่อนในกล่มุ ได้ และเม่ือฝึกปฏบิ ัตจิ นเขา้ ใจแลว้ ให้นักเรยี น ศกึ ษาหวั ข้อต่อไป
หนา้ ท่ี 13 คาสั่งกาหนดความหนาของเส้นระหว่างช่องตาราง การกาหนดความหนาของเส้นระหว่างชอ่ งตารางเปน็ คาส่ังท่ีใช้กาหนดลักษณะพิเศษเพ่ิมเตมิ ให้กับคาสั่ง <TABLE> ซงึ่ คาส่งั ทใ่ี ช้กาหนดความหนาของเส้นระหว่างชอ่ งตารางคอื CELLSPACING รปู แบบ <TABLE CELLSPACING =“คา่ ตัวเลขความหนาของเส้นระหว่างชอ่ งตาราง” ตวั อยา่ งการใชง้ าน กิจกรรมระหวา่ งเรียน ใหน้ กั เรียนฝกึ ใชค้ าส่งั กาหนดความหนาของเสน้ ระหว่างชอ่ งตาราง ขณะฝึกปฏิบัตสิ ามารถถามเพ่ือนในกล่มุ ได้ และเมือ่ ฝกึ ปฏบิ ตั จิ นเขา้ ใจแลว้ ให้นกั เรียนทาใบงานท่ี 1
หนา้ ที่ 14 ใบงานท่ี 1 เรอ่ื ง การสร้างตาราง หนว่ ยท่ี 4 ตาราง ช่อื ……………………………………………………………………………ชนั้ มัธยมศกึ ษาปีที่ ………….. เลขที่………….. คาชแ้ี จง ให้นกั เรียนสร้างเวบ็ เพจให้เหมือนด้านล่างและบันทกึ แฟม้ ข้อมูลไว้ใน Flash Drive และต้งั ชือ่ ว่า course.html โดยบงั คับใชค้ าส่ังดงั ตอ่ ไปนี้ คาสง่ั หวั เรอ่ื งเอกสารเว็บ คาสง่ั กาหนดลักษณะหวั เรือ่ งท่ีมีขนาดใหญ่ระดับ 2
หน้าท่ี 15 เกณฑก์ ารให้คะแนน ทาถูกตอ้ ง ให้ 1 คะแนน ทาผิด ให้ 0 คะแนน เกณฑ์การประเมนิ ผล นกั เรยี นได้คะแนน 8-10 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นกั เรยี นได้คะแนน 7 คะแนน ผา่ นเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นักเรยี นได้คะแนน 6 คะแนน ผา่ นเกณฑ์ นกั เรยี นได้คะแนน 0-5 คะแนน ไมผ่ า่ นเกณฑ์ รายการประเมนิ ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมิน (1 คะแนน) (0 คะแนน) 1. กาหนดคาว่า “โครงสร้างหลักสตู รสถานศึกษา” ใหเ้ ปน็ หัวเรื่องเอกสารเว็บ 2. กาหนดคาวา่ “โครงสร้างหลักสตู รสถานศึกษา” ใหเ้ ป็นหัว เรอ่ื งท่มี ีขนาดใหญ่อนั ดบั 2 และเปน็ สเี ขยี ว 3. กาหนดคาวา่ “ตามหลักสูตรแกนกลางการศึกษาขนั้ พื้นฐาน พทุ ธศักราช 2551” ใหเ้ ป็นหัวเรือ่ งที่มีขนาดใหญ่อันดับ 2 และ เป็นสีเขียว 4. มีการใช้คาสั่งกาหนดข้อความอธิบายตาราง 5. มกี ารใช้คาสั่งสรา้ งตาราง 6. มีการใช้คาสัง่ กาหนดเส้ยขอบของตาราง 7. มกี ารใช้คาสงั่ กาหนดความหนาของเสน้ ระหวา่ งชอ่ งตาราง 8. บนั ทึกชิน้ งานลงใน Flash Drive โดยต้งั ชื่อชนิ้ งานว่า “course” 9. มีการจัดระเบยี บ code ในหนา้ NotePad 10. ในภาพรวมการจัดหนา้ เว็บเพจทสี่ ร้างข้นึ เหมือนกับตัวอยา่ ง รวมคะแนน (คะแนนเตม็ 10 คะแนน)
หน้าที่ 16 ใบความรู้ที่ 2 เรื่อง ตกแต่งตาราง ตอนท่ี 1 หนว่ ยการเรยี นท่ี 4 ตาราง กจิ กรรมทบทวนความร้เู ดิม ใหน้ ักเรียนทบทวนความรู้เดิม โดยฝึกใช้คาส่ังสร้างตาราง คาสั่งกาหนดเสน้ ขอบของตาราง คาสั่งกาหนดความหนาของเสน้ ระหว่าง ช่องตาราง ขณะทบทวนสามารถถามเพ่ือนในกลุ่มได้ และเม่อื ทบทวน จนเขา้ ใจแล้ว ให้นกั เรยี นศกึ ษาหัวข้อต่อไป คาสัง่ กาหนดสขี องเส้นขอบตาราง การกาหนดสีของเสน้ ขอบเป็นคาสั่งท่ีใช้กาหนดลักษณะพิเศษเพิม่ เตมิ ให้กบั คาส่งั <TABLE> ซึง่ คาสัง่ ท่ีใช้กาหนดสีของเสน้ ขอบคือ BORDERCOLOR รูปแบบ <TABLE BORDERCOLOR=“รหัสสีหรอื ช่ือสี” ตัวอย่างการใชง้ าน
หนา้ ที่ 17 กจิ กรรมระหวา่ งเรียน ให้นักเรยี นฝึกใช้คาส่ังกาหนดสเี สน้ ขอบตาราง ขณะฝกึ ปฏิบตั ิ สามารถถามเพื่อนในกล่มุ ได้ และเมือ่ ฝึกปฏิบตั จิ นเขา้ ใจแล้ว ใหน้ กั เรยี น ศึกษาหวั ข้อต่อไป คาส่ังกาหนดความกว้างและความสงู ของตาราง การกาหนดความกวา้ งและความสูงของตาราง เป็นคาส่ังท่ใี ช้กาหนดลักษณะพเิ ศษเพิ่มเติม ให้กบั คาสัง่ <TABLE> ซึง่ คาสัง่ ที่ใช้กาหนดความกว้างของตาราง คือ WIDTH และคาสั่งที่ใชก้ าหนด ความสงู ของตาราง คือ HEIGHT โดยสามารถกาหนดความกว้างและความสงู ของตารางเป็นพกิ เซล หรือเปน็ เปอรเ์ ซน็ ต์ก็ได้ รปู แบบ <TABLE WIDTH =“ความกวา้ ง” HIGHT=“ความสงู ” ตวั อยา่ งการการกาหนดความกว้างและความสูงเปน็ พกิ เซล
หนา้ ที่ 18 กิจกรรมระหว่างเรยี น ใหน้ กั เรยี นฝึกใชค้ าส่งั กาหนดความกว้างและความสงู ของ ตารางเปน็ พิกเซล ขณะฝกึ ปฏบิ ัติสามารถถามเพ่ือนในกลุ่มได้ และเม่อื ฝกึ ปฏิบัตจิ นเขา้ ใจแลว้ ใหน้ ักเรยี นศึกษาหัวข้อตอ่ ไป ตัวอยา่ งการกาหนดความกว้างและความสูงเปน็ เปอรเ์ ซน็ ต์ ความกวา้ งของ ตาราง 40%ของ หนา้ เว็บเบาวเ์ ซอร์ ความสงู ของ ตาราง 50%ของ หน้าเว็บเบาวเ์ ซอร์ กิจกรรมระหวา่ งเรียน ให้นกั เรียนฝึกใช้คาส่ังกาหนดความกว้างและความสูงของ ตารางเป็นเปอรเ์ ซ็นต์ ขณะฝึกปฏิบัตสิ ามารถถามเพื่อนในกลมุ่ ได้ และ เมื่อฝึกปฏบิ ตั จิ นเขา้ ใจแล้ว ใหน้ ักเรยี นศึกษาหัวขอ้ ต่อไป
หน้าท่ี 19 คาสง่ั การกาหนดตาแหน่งของตาราง การกาหนดตาแหน่งของตาราง เป็นคาสั่งทีใ่ ชก้ าหนดลกั ษณะพเิ ศษเพ่ิมเติมให้กบั คาส่งั <TABLE> ซ่ึงคาสัง่ ท่ใี ช้กาหนดตาแหน่งของตารางทแี่ สดงบนเว็บเบราวเ์ ซอร์ ว่าจะให้อยู่กง่ึ กลาง ชดิ ซ้าย หรือชิดขวานนั้ คือ LEFT จัดวางตารางใหช้ ดิ ด้านซา้ ยของเวบ็ เบราว์เซอร์ CENTER จดั วางตารางให้อยู่กึ่งกลางของเวบ็ เบราวเ์ ซอร์ RIGHT จัดวางตารางใหช้ ดิ ด้านขวาของเว็บเบราว์เซอร์ รปู แบบ <TABLE ALIGN =“ตาแหนง่ ของตาราง” โดยปกติการใช้คาสงั่ สร้างตาราง เมือ่ แสดงบนเวบ็ เบราว์เซอร์ตารางกจ็ ะอยู่ชดิ ซา้ ยอยแู่ ลว้ ซง่ึ ไม่จาเปน็ ตอ้ งกาหนดก็ได้ แตถ่ ้าต้องการกาหนดสามารถทาได้ ดังนี้ ตวั อย่างการกาหนดตารางให้อยู่ชดิ ซา้ ย ตารางอยชู่ ดิ ซ้ายของหนา้ เว็บเบราว์เซอร์
หน้าท่ี 20 ตัวอยา่ งการกาหนดตารางใหอ้ ยู่กึ่งกลาง ตารางอยู่กึ่งกลางของหนา้ เวบ็ เบราวเ์ ซอร์ ตวั อยา่ งการใช้งานกาหนดตารางใหอ้ ยู่ชดิ ขวา ตารางอยู่ชดิ ขวาของหนา้ เวบ็ เบราวเ์ ซอร์
หน้าท่ี 21 กจิ กรรมระหว่างเรยี น ใหน้ กั เรียนฝกึ ใช้คาสง่ั กาหนดตาแหนง่ ของตาราง ขณะฝึกปฏิบัติ สามารถถามเพื่อนในกลุ่มได้ และเมือ่ ฝึกปฏบิ ตั จิ นเข้าใจแลว้ ใหน้ ักเรยี น ศึกษาหัวข้อต่อไป คาสัง่ กาหนดเว้นระยะขอบภายในช่องตาราง การกาหนดเวน้ ระยะขอบภายในชอ่ งตาราง เป็นคาส่งั ทใี่ ช้กาหนดลกั ษณะพิเศษเพิม่ เตมิ ใหก้ บั คาส่งั <TABLE> ซ่งึ คาสั่งท่ีใชก้ าหนดเว้นระยะขอบภายในชอ่ งตารางคอื CELLPADDING สามารถกาหนดระยะขอบภายในช่องตารางเปน็ พิกเซลหรอื เปน็ เปอร์เซน็ ต์ก็ได้ และภายในแต่ละ ชอ่ งตารางจะมีพ้ืนทว่ี า่ งเทา่ กันทกุ ช่อง รปู แบบ <TABLE CELLPADDING =“ระยะขอบภายในตาราง” ตัวอย่างการใชง้ านกาหนดระยะขอบภายในช่องตารางเป็นพิกเซล
หนา้ ที่ 22 ตวั อย่างการใช้งานกาหนดระยะขอบภายในช่องตารางเป็นเปอร์เซน็ ต์ กิจกรรมระหวา่ งเรียน ให้นักเรยี นฝกึ ใช้คาส่งั กาหนดเวน้ ระยะขอบภายในช่องตาราง ขณะฝกึ ปฏิบัติสามารถถามเพื่อนในกลมุ่ ได้ และเม่ือฝกึ ปฏบิ ัติจนเข้าใจแล้ว ใหน้ กั เรียนทาใบงานท่ี 2
หน้าที่ 23 ใบงานที่ 2 เรอ่ื ง การตกแต่งตาราง ตอนท่ี 1 หนว่ ยท่ี 4 ตาราง ช่ือ……………………………………………………………………………ชั้นมัธยมศกึ ษาปีที่ ………….. เลขที่………….. คาชแี้ จง ให้นักเรยี นสรา้ งเวบ็ เพจให้เหมือนด้านลา่ ง โดยเปิดแฟ้มข้อมลู ทช่ี อื่ course.html ขึน้ มาสร้างเพิม่ เติม - กาหนดเส้นขอบตาราง เปน็ สีแดง - กาหนดความกวา้ ง ความสงู ของตารางเปน็ เปอรเ์ ซ็นต์ - กาหนดให้ตารางอยู่ กง่ึ กลางหน้าจอ - กาหนดการเวน้ ระยะ ขอบภายในช่องตาราง เป็นเปอร์เซ็นต์ - กาหนดเสน้ ขอบตารางเป็นสีเขียว - กาหนดความกวา้ งความสูงของตาราง เป็นพิกเซล - กาหนดให้ตารางอยู่ชิดขวาหนา้ จอ - กาหนดการเว้นระยะขอบภายในชอ่ ง ตารางเปน็ พิกเซล
หน้าท่ี 24 เกณฑก์ ารให้คะแนน ทาถูกตอ้ ง ให้ 1 คะแนน ทาผิด ให้ 0 คะแนน เกณฑก์ ารประเมนิ ผล นกั เรยี นได้คะแนน 8-10 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นกั เรยี นได้คะแนน 7 คะแนน ผ่านเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นักเรียนได้คะแนน 6 คะแนน ผ่านเกณฑ์ นกั เรียนได้คะแนน 0-5 คะแนน ไมผ่ ่านเกณฑ์ รายการประเมิน ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมิน (1 คะแนน) (0 คะแนน) 1. สร้างต่อจาก แฟม้ ข้อมูลที่ช่อื “course.html” 2. ในภาพรวมการจัดหนา้ เว็บเพจทสี่ ร้างขน้ึ เหมือนกับตวั อย่าง ตารางห้องเรยี นปกติแผนการเรยี นวทิ ยาศาสตร์-คณติ ศาสตร์ 3. กาหนดเสน้ ขอบตารางให้เปน็ สีแดง 4. กาหนดความกว้างความสงู ของตารางเปน็ เปอรเ์ ซ็นต์ 5. กาหนดใหต้ ารางอยู่กง่ึ กลางหน้าจอ 6. กาหนดการเว้นระยะขอบภายในชอ่ งตารางเป็นเปอรเ์ ซ็นต์ ตารางห้องเรยี นปกติแผนการเรยี นพนื้ ฐานอาชีพ 7. กาหนดเสน้ ขอบตารางใหเ้ ป็นสีเขยี ว 8. กาหนดความกวา้ งความสงู ของตารางเปน็ พิกเซล 9. กาหนดใหต้ ารางอยู่ชิดขวาหน้าจอ 10. กาหนดการเวน้ ระยะขอบภายในชอ่ งตารางเปน็ พิกเซล รวมคะแนน (คะแนนเต็ม 10 คะแนน)
หนา้ ที่ 25 ใบความรูท้ ี่ 3 เร่อื ง การตกแต่งตาราง ตอนท่ี 2 หนว่ ยการเรยี นที่ 4 ตาราง กิจกรรมทบทวนความรูเ้ ดิม ใหน้ ักเรียนทบทวนความรเู้ ดิม โดยฝึกใชค้ าส่ังกาหนดสีของ เส้นขอบตาราง คาสงั่ กาหนดความกวา้ งและความสงู ของตาราง คาส่ัง กาหนดตาแหน่งของตาราง คาสง่ั กาหนดเวน้ ระยะขอบภายในชอ่ งตาราง ขณะทบทวนสามารถถามเพื่อนในกล่มุ ได้ และเม่ือทบทวนจนเข้าใจแล้ว ให้นักเรยี นศึกษาหัวข้อต่อไป คาส่งั กาหนดสีพื้นของตาราง การกาหนดสีพืน้ ของตาราง เปน็ คาสั่งท่ใี ช้กาหนดลกั ษณะพิเศษเพิม่ เตมิ ให้กบั คาสง่ั <TABLE> ซึ่งคาส่ังทใ่ี ช้กาหนดสพี ืน้ ของตารางสามารถทาให้หน้าเว็บเพจมคี วามนา่ สนใจมากข้ึน รูปแบบ <TABLE BGCOLOR =“รหสั สีหรือช่ือสี”> ตัวอย่างการใช้งาน
หนา้ ที่ 26 กิจกรรมระหว่างเรียน ให้นักเรยี นฝึกใชค้ าสงั่ กาหนดสพี นื้ ของตาราง ขณะฝึกปฏิบัติ สามารถถามเพ่ือนในกลุ่มได้ และเมื่อฝึกปฏบิ ัตจิ นเข้าใจแล้ว ใหน้ กั เรยี น ศกึ ษาหัวข้อต่อไป คาสัง่ กาหนดรูปภาพเปน็ พื้นหลงั ของตาราง การกาหนดรูปภาพเป็นพนื้ หลังของตาราง เป็นคาสงั่ ทใ่ี ชก้ าหนดลกั ษณะพิเศษเพ่มิ เติมให้กบั คาส่ัง <TABLE> ซงึ่ คาสง่ั ทใ่ี ช้กาหนดสพี ้นื หลงั ของตารางสามารถทาใหห้ น้าเวบ็ เพจมีความน่าสนใจ มากขึน้ รปู แบบ <TABLE BACKGROUND =“ช่อื .นามสกลุ รปู ภาพ”> ตวั อย่างการใช้งาน
หนา้ ที่ 27 กจิ กรรมระหวา่ งเรียน ให้นักเรียนฝึกใชค้ าส่ังกาหนดรูปภาพเป็นพื้นหลังของตาราง ขณะฝกึ ปฏิบัตสิ ามารถถามเพอื่ นในกลุ่มได้ และเม่ือฝึกปฏิบตั จิ นเขา้ ใจแล้ว ให้นักเรียนศึกษาหัวข้อต่อไป จากเนื้อหาท่ีผา่ นมา สงั เกตวา่ ตารางทีส่ รา้ งขน้ึ ในแตล่ ะแถว แต่ละคอลมั น์ จะมจี านวน ช่องตารางเท่ากนั ซง่ึ บางครง้ั อาจต้องการสรา้ งตารางรปู แบบอ่นื เช่น ในแต่ละแถวมีจานวนช่องตาราง ไม่เท่ากัน หรอื แตล่ ะคอลมั น์มีจานวนชอ่ งตารางไมเ่ ท่ากนั คาสัง่ ในภาษา HTML มีคาสง่ั สาหรับรวม ช่องตารางทั้งในแนวแถวและแนวคอลมั น์ คาส่งั รวมชอ่ งตารางตามแนวแถว รูปแบบ <TR><TD ROWSPAN=จานวนแถวที่จะรวม>…..</TD> </TR> คาสง่ั รวมช่องตารางตามแนวคอลัมน์ รูปแบบ <TR><TD COLSPAN=จานวนคอลัมนท์ จ่ี ะรวม>…..</TD> </TR>
หนา้ ท่ี 28 เมื่อตอ้ งการสร้างตารางดงั นี้ ระดบั ชั้น หญิง ปีการศกึ ษา 2562 รวม 25 ชาย 47 มธั ยมศกึ ษาปีท่ี 1 28 22 50 มธั ยมศึกษาปีที่ 2 17 22 42 มัธยมศกึ ษาปที ี่ 3 25 มขี ัน้ ตอนการสร้างตาราง ดงั ต่อไปน้ี ขัน้ ตอนที่ 1 ให้นบั แถว เพ่ือจะไดร้ วู้ า่ มีทั้งหมดกี่แถว แถวท่ี 1 ระดับชน้ั หญงิ ปกี ารศึกษา 2562 รวม 25 ชาย 47 แถวที่ 2 22 แถวที่ 3 มัธยมศึกษาปที ี่ 1 แถวท่ี 4 มธั ยมศึกษาปีที่ 2 28 22 50 แถวที่ 5 มธั ยมศกึ ษาปีที่ 3 17 25 42 ข้นั ตอนท่ี 2 พมิ พ์คาส่ังสร้างแถวทั้งหมด 5 แถว โดยใช้คาส่ังดงั ต่อไปน้ี ตวั อยา่ งการใช้งาน <table> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> </table> ขัน้ ตอนที่ 3 ให้นบั คอลมั น์ เพื่อจะได้รู้วา่ มีทงั้ หมดกี่คอลัมน์ คอลัมนท์ ่ี 1 คอลมั น์ที่ 2 คอลัมนท์ ี่ 3 คอลมั น์ท่ี 4 ระดบั ชั้น หญิง ปกี ารศกึ ษา 2562 รวม 25 ชาย 47 มธั ยมศึกษาปที ่ี 1 28 22 50 มธั ยมศกึ ษาปที ่ี 2 17 22 42 มธั ยมศึกษาปีที่ 3 25
หน้าท่ี 29 ขัน้ ตอนที่ 4 พิมพค์ าส่งั รวมช่องตารางตามแนวแถว (ชอ่ งระดบั ช้นั รวมช่องตารางไว้ 2 แถว) แถวท่ี 1 ระดับชัน้ ปกี ารศกึ ษา 2562 แถวที่ 2 หญงิ ชาย รวม 25 22 47 มธั ยมศกึ ษาปที ี่ 1 มธั ยมศึกษาปที ี่ 2 28 22 50 มธั ยมศึกษาปีที่ 3 17 25 42 ตวั อย่างการใช้งาน <table> <tr> <th rowspan=2>ระดับชัน้ </th> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> </table> ข้นั ตอนที่ 5 พิมพค์ าสัง่ รวมช่องตารางตามแนวคอลมั น์ (ช่องปกี ารศกึ ษา 2562 รวมชอ่ ง ตารางไว้ 3 คอลมั น์) ระดบั ชน้ั คอลัมน์ท่ี 1 คอลมั น์ท่ี 2 คอลมั นท์ ี่ 3 มธั ยมศึกษาปีท่ี 1 หญงิ ปีการศึกษา 2562 รวม มัธยมศึกษาปที ่ี 2 25 ชาย 47 มธั ยมศึกษาปีที่ 3 28 22 50 17 22 42 25
หนา้ ที่ 30 ตวั อยา่ งการใชง้ าน <table> <tr> <th rowspan=2>ระดบั ช้ัน</th> <th colspan=3>ปีการศึกษา 2562</th> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> </table> ข้นั ตอนท่ี 6 พมิ พ์คาสงั่ สรา้ งคอลัมน์ในแถวท่ี 2 มี 3 คอลัมน์ (ชอ่ งหญิง ชาย รวม) คอลัมน์ท่ี 1 คอลัมนท์ ่ี 2 คอลัมน์ที่ 3 ระดับช้นั หญงิ ปกี ารศกึ ษา 2562 รวม 25 ชาย 47 มัธยมศกึ ษาปีท่ี 1 28 22 50 มัธยมศึกษาปที ี่ 2 17 22 42 มธั ยมศกึ ษาปที ่ี 3 25
หน้าที่ 31 ตวั อย่างการใช้งาน <table> <tr> <th rowspan=2>ระดบั ชัน้ </th> <th colspan=3>ปีการศึกษา 2562</th> </tr> <tr> <th>หญงิ </th><th>ชาย</th><th>รวม</th> </tr> <tr></tr> <tr></tr> <tr></tr> </table> ขั้นตอนท่ี 7 พมิ พค์ าสง่ั สร้างคอลมั นใ์ นแถวท่ี 3 มี 4 คอลัมน์ (ช่องมธั ยมศึกษาปีที่ 1 25 22 และ47) คอลัมนท์ ่ี 1 คอลัมนท์ ี่ 2 คอลมั นท์ ่ี 3 คอลมั น์ที่ 4 ระดับชนั้ หญิง ปกี ารศึกษา 2562 รวม 25 ชาย 47 มัธยมศึกษาปีที่ 1 28 22 50 มธั ยมศกึ ษาปีที่ 2 17 22 42 มธั ยมศกึ ษาปที ่ี 3 25
หนา้ ที่ 32 ตวั อยา่ งการใชง้ าน <table> <tr> <th rowspan=2>ระดบั ชน้ั </th> <th colspan=3>ปกี ารศึกษา 2562</th> </tr> <tr> <th>หญิง</th><th>ชาย</th><th>รวม</th> </tr> <tr> <td>มธั ยมศึกษาปที ่ี 1</td><td>25</td><td>22</td><td>47</td> </tr> <tr></tr> <tr></tr> </table> ขน้ั ตอนที่ 8 พมิ พ์คาสง่ั สร้างคอลมั น์ในแถวที่ 4 มี 4 คอลัมน์ (ช่องมัธยมศึกษาปีที่ 2 28 22 และ50) คอลัมนท์ ่ี 1 คอลัมนท์ ่ี 2 คอลัมน์ที่ 3 คอลมั นท์ ่ี 4 ระดับช้ัน หญิง ปีการศกึ ษา 2562 รวม 25 ชาย 47 มธั ยมศกึ ษาปีที่ 1 28 22 50 มัธยมศึกษาปีที่ 2 17 22 42 มัธยมศกึ ษาปีท่ี 3 25
หน้าที่ 33 ตวั อยา่ งการใช้งาน <table> <tr> <th rowspan=2>ระดับช้นั </th> <th colspan=3>ปีการศึกษา 2562</th> </tr> <tr> <th>หญิง</th><th>ชาย</th><th>รวม</th> </tr> <tr> <td>มธั ยมศึกษาปีที่ 1</td><td>25</td><td>22</td><td>47</td> </tr> <tr> <td>มธั ยมศึกษาปที ่ี 2</td><td>28</td><td>22</td><td>50</td> </tr> <tr></tr> </table> ขั้นตอนที่ 9 พิมพ์คาสงั่ สร้างคอลมั นใ์ นแถวที่ 5 มี 4 คอลัมน์ (ชอ่ งมธั ยมศกึ ษาปที ี่ 3 17 25 และ42) คอลัมน์ที่ 1 คอลมั นท์ ่ี 2 คอลัมน์ท่ี 3 คอลมั นท์ ี่ 4 ระดบั ช้ัน หญงิ ปกี ารศกึ ษา 2562 รวม 25 ชาย 47 มัธยมศกึ ษาปีที่ 1 28 22 50 มัธยมศกึ ษาปที ี่ 2 17 22 42 มัธยมศึกษาปที ่ี 3 25
หนา้ ที่ 34 ตวั อยา่ งการใช้งาน <table> <tr> <th rowspan=2>ระดบั ชั้น</th> <th colspan=3>ปีการศกึ ษา 2562</th> </tr> <tr> <th>หญิง</th><th>ชาย</th><th>รวม</th> </tr> <tr> <td>มธั ยมศกึ ษาปีท่ี 1</td><td>25</td><td>22</td><td>47</td> </tr> <tr> <td>มัธยมศกึ ษาปที ่ี 2</td><td>28</td><td>22</td><td>50</td> </tr> <tr> <td>มธั ยมศึกษาปีท่ี 3</td><td>17</td><td>25</td><td>42</td> </tr> </table>
หนา้ ที่ 35 กจิ กรรมระหวา่ งเรียน ใหน้ กั เรียนฝึกใชค้ าสงั่ รวมช่องตารางในแนวแถว และคาสง่ั รวม ชอ่ งตารางในแนวคอลัมน์ ขณะฝึกปฏบิ ตั สิ ามารถถามเพ่ือนในกลุ่มได้ และ เมือ่ ฝกึ ปฏิบัติจนเข้าใจแลว้ ใหน้ ักเรยี นทาใบงานที่ 3
หนา้ ที่ 36 ใบงานท่ี 3 เรื่อง การตกแตง่ ตาราง ตอนที่ 2 หน่วยที่ 4 ตาราง ชื่อ……………………………………………………………………………ช้ันมัธยมศกึ ษาปที ่ี ………….. เลขท่ี………….. คาช้แี จง ให้นักเรยี นสรา้ งเวบ็ เพจใหเ้ หมือนด้านลา่ ง โดยเปิดแฟม้ ข้อมูลท่ีชอ่ื course.html ข้นึ มาสร้างเพม่ิ เติม กาหนดสพี ืน้ ของตาราง ให้เป็นสีเหลอื ง กาหนดพนื้ ของตาราง ให้เป็นรปู ภาพ ใช้คาสัง่ รวมชอ่ งตาราง ตามแนวคอลมั น์ ใชค้ าสงั่ รวมชอ่ งตาราง ตามแนวแถว
หน้าท่ี 37 เกณฑ์การใหค้ ะแนน ทาถกู ต้อง ให้ 1 คะแนน ทาผดิ ให้ 0 คะแนน เกณฑก์ ารประเมนิ ผล นักเรยี นได้คะแนน 8-10 คะแนน ผ่านเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรียนได้คะแนน 7 คะแนน ผ่านเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นักเรยี นได้คะแนน 6 คะแนน ผ่านเกณฑ์ นกั เรยี นได้คะแนน 0-5 คะแนน ไมผ่ ่านเกณฑ์ รายการประเมนิ ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมิน (1 คะแนน) (0 คะแนน) 1. สรา้ งตอ่ จาก แฟม้ ข้อมูลที่ชอื่ “course.html” 2. กาหนดสพี ้ืนของตารางใหเ้ ป็นสีเหลอื ง 3. กาหนดพื้นของตารางใหเ้ ป็นรปู ภาพ 4. ใชค้ าสั่งรวมช่องตารางตามแนวคอลัมน์ชอ่ ง “เลือกเสรี 5” 5. ใช้คาสง่ั รวมชอ่ งตารางตามแนวคอลัมน์ชอ่ ง “เลอื กเสรี 6” 6. ใชค้ าส่ังรวมชอ่ งตารางตามแนวคอลมั น์ชอ่ ง “รวมเพ่ิมเติม” 7. ใช้คาสงั่ รวมชอ่ งตารางตามแนวแถวชอ่ ง “1.5” 8. ใช้คาสง่ั รวมช่องตารางตามแนวแถวชอ่ ง “3” 9. ใชค้ าสั่งรวมช่องตารางตามแนวแถวชอ่ ง “60” 10. ในภาพรวมการจัดหน้าเว็บเพจที่สร้างขึ้นเหมือนกบั ตวั อยา่ ง รวมคะแนน (คะแนนเตม็ 10 คะแนน)
หนา้ ที่ 38 ใบความรูท้ ี่ 4 เรือ่ ง การตกแตง่ ชอ่ งในตาราง หนว่ ยการเรียนท่ี 4 ตาราง กิจกรรมทบทวนความร้เู ดิม ให้นักเรียนทบทวนความรเู้ ดิม โดยฝกึ ใช้คาส่ังกาหนดสพี ้ืน ของตาราง คาส่งั กาหนดรูปภาพเปน็ พืน้ หลงั ของตาราง คาสั่งรวมช่อง ในตารางตามแนวคอลัมน์ คาส่ังรวมชอ่ งในตารางตามแนวแถว ขณะ ทบทวนสามารถถามเพื่อนในกลมุ่ ได้ และเม่ือทบทวนจนเขา้ ใจแล้ว ใหน้ ักเรียนศึกษาหวั ข้อต่อไป คาสง่ั กาหนดตาแหน่งของข้อมูลภายในชอ่ งตาราง ALIGN เป็นการกาหนดตาแหนง่ ของขอ้ มลู ภายในช่องตาราง สามารถกาหนดได้ดงั นี้ Left เม่อื ต้องการกาหนดขอ้ มูลภายในชอ่ งตารางให้อย่ชู ิดซ้าย Right เมอ่ื ต้องการกาหนดข้อมูลภายในชอ่ งตารางใหอ้ ยูช่ ดิ ขวา Center เม่ือต้องการกาหนดข้อมลู ภายในชอ่ งตารางให้อย่กู ึ่งกลาง กรณตี อ้ งการกาหนดตาแหน่งขอ้ มลู ภายในช่องตารางท้ังแถวให้เหมือนกัน รูปแบบ <TR ALIGN=ตาแหนง่ ท่ีต้องการ>…..</TR> ตัวอยา่ งกรณีตอ้ งการกาหนดตาแหน่งข้อมลู ภายในชอ่ งตารางทงั้ แถวให้เหมือนกนั <tr align=center> <td>มธั ยมศกึ ษาปีที่ 1</td><td>25</td><td>22</td><td>47</td> </tr>
หนา้ ที่ 39 กจิ กรรมระหวา่ งเรียน ใหน้ ักเรยี นฝกึ ใช้คาสง่ั กาหนดตาแหน่งขอ้ มูลภายในช่องตาราง ทั้งแถวให้เหมือนกัน ขณะฝึกปฏิบตั สิ ามารถถามเพื่อนในกลุ่มได้ และเมื่อ ฝกึ ปฏบิ ัตจิ นเขา้ ใจแล้ว ใหน้ ักเรียนศกึ ษาหัวข้อตอ่ ไป
หนา้ ท่ี 40 กรณีต้องการกาหนดตาแหน่งข้อมูลภายในแต่ละช่องไมเ่ หมือนกัน รปู แบบ <TD ALIGN=ตาแหนง่ ที่ต้องการ>…..</TD> ตวั อย่างกรณีต้องการกาหนดตาแหนง่ ข้อมูลภายในแต่ละช่อง <tr align=center> <td>มธั ยมศกึ ษาปีที่ 2</td><td align=center>28</td><td>22</td> <td align=right>50</td> </tr>
หนา้ ท่ี 41 กจิ กรรมระหวา่ งเรยี น ให้นักเรียนฝกึ ใช้คาสั่งกาหนดตาแหนง่ ข้อมลู ภายในแตล่ ะชอ่ ง ไม่เหมือนกนั ขณะฝึกปฏบิ ัติสามารถถามเพื่อนในกลุม่ ได้ และเมือ่ ฝึกปฏบิ ัติ จนเข้าใจแลว้ ให้นักเรยี นศึกษาหัวข้อต่อไป คาส่ังกาหนดสีภายในช่องตาราง กรณตี อ้ งการกาหนดสีภายในช่องตารางท้ังแถวใหเ้ หมือนกัน รปู แบบ <TR BGCOLOR=ชื่อสีหรอื รหัสสีท่ีต้องการ>…..</TR> ตัวอย่างกรณีต้องการกาหนดตาแหนง่ ขอ้ มูลภายในชอ่ งตารางทงั้ แถวให้เหมือนกนั <tr bgcolor=yellow> <td>มธั ยมศกึ ษาปีท่ี 1</td><td>25</td><td>22</td><td>47</td> </tr>
หน้าท่ี 42 กิจกรรมระหวา่ งเรียน ให้นกั เรยี นฝกึ ใชค้ าสั่งกาหนดสีภายในชอ่ งตารางทั้งแถวให้ เหมือนกัน ขณะฝึกปฏิบตั สิ ามารถถามเพอื่ นในกลุ่มได้ และเม่ือฝกึ ปฏิบัติ จนเข้าใจแลว้ ให้นักเรยี นศึกษาหัวข้อต่อไป กรณตี ้องการกาหนดสีภายในชอ่ งตารางไม่เหมือนกนั รปู แบบ <TD BGCOLOR=ชื่อสหี รอื รหัสสีที่ต้องการ>…..</TD> ตัวอย่างกรณตี อ้ งการกาหนดสภี ายในชอ่ งตารางไมเ่ หมอื นกัน <tr align=center> <td bgcolor=blue>มัธยมศึกษาปีที่ 2</td><td align=center bgcolor=pink>28</td> <td bgcolor=green>22</td><td align=right>50</td> </tr>
หนา้ ที่ 43 กิจกรรมระหวา่ งเรียน ให้นกั เรียนฝกึ ใชค้ าสัง่ กาหนดสภี ายในช่องตารางไมเ่ หมอื นกัน ขณะฝึกปฏบิ ตั ิสามารถถามเพ่อื นในกลุ่มได้ และเม่ือฝึกปฏบิ ัติจนเขา้ ใจแลว้ ให้นกั เรยี นศกึ ษาหวั ข้อต่อไป คาสง่ั กาหนดสีตวั อักษรภายในชอ่ งตาราง รปู แบบ <TD FONT COLOR=ชื่อสหี รอื รหัสสีที่ตอ้ งการ>…..</TD> ตวั อยา่ งการใช้งาน <tr> <td font color=blue>มัธยมศกึ ษาปที ่ี 1</td><td>25</td> <td>22</td><td>47</td> </tr>
หนา้ ท่ี 44 กจิ กรรมระหว่างเรยี น ใหน้ ักเรียนฝึกใช้คาสัง่ กาหนดสีตวั อกั ษรภายในช่องตาราง ขณะฝกึ ปฏบิ ตั ิสามารถถามเพือ่ นในกลุ่มได้ และเม่ือฝึกปฏบิ ตั จิ นเขา้ ใจแลว้ ให้นักเรยี นศึกษาหวั ข้อตอ่ ไป คาสงั่ กาหนดรปู ภาพภายในช่องตาราง กรณตี อ้ งการกาหนดรปู ภาพภายในชอ่ งตารางทั้งแถว รูปแบบ <TR BACKGROUND=ช่ือรูปภาพ>…..</TR> ตวั อย่างกรณีต้องการกาหนดรปู ภาพภายในชอ่ งตารางท้ังแถว <tr background=backtable.jpg> <td>มธั ยมศกึ ษาปีท่ี 1</td><td>25</td><td>22</td><td>47</td> </tr>
หนา้ ท่ี 45 กจิ กรรมระหวา่ งเรียน ใหน้ ักเรียนฝึกใชค้ าส่ังกาหนดรปู ภาพภายในช่องตารางทั้งแถว ขณะฝกึ ปฏบิ ัตสิ ามารถถามเพ่ือนในกลุ่มได้ และเม่ือฝกึ ปฏิบตั จิ นเข้าใจแลว้ ให้นักเรยี นศึกษาหวั ข้อตอ่ ไป กรณตี อ้ งการกาหนดรปู ภาพภายในช่องตารางไมเ่ หมอื นกัน รปู แบบ <TD BACKGROUND=ชอ่ื รปู ภาพ>…..</TD> ตวั อย่างกรณีตอ้ งการกาหนดรปู ภาพภายในชอ่ งตารางไม่เหมือนกัน <tr> <td background=backtable.jpg>มธั ยมศกึ ษาปีที่ 2</td><td>28</td> <td background=backbody.gif>22</td><td>50</td> </tr>
หนา้ ท่ี 46 กจิ กรรมระหว่างเรียน ใหน้ กั เรยี นฝึกใชค้ าส่ังกาหนดรูปภาพภายในช่องตารางไม่เหมือนกนั ขณะฝกึ ปฏบิ ัติสามารถถามเพอ่ื นในกลมุ่ ได้ และเม่ือฝึกปฏิบตั ิจนเขา้ ใจแลว้ ใหน้ ักเรยี นทาใบงานที่ 4
หนา้ ท่ี 47 ใบงานท่ี 4 เรอื่ ง การตกแตง่ ชอ่ งในตาราง หน่วยท่ี 4 ตาราง ชือ่ ……………………………………………………………………………ชัน้ มัธยมศกึ ษาปีที่ ………….. เลขท่ี………….. คาชี้แจง ใหน้ กั เรยี นสร้างเว็บเพจให้เหมือนดา้ นล่าง โดยเปิดแฟม้ ข้อมูลทชี่ ่อื course.html ขึ้นมาสร้างเพ่ิมเติม กาหนดสีตัวอกั ษร กาหนดสภี ายใน ภายในชอ่ งตาราง ช่องตารางทงั้ แถว กาหนดรูปภาพภายใน ไม่เหมอื นกัน ชอ่ งตารางทง้ั แถว กาหนดสีภายใน กาหนดภาพภายในชอ่ ง ชอ่ งตารางทัง้ แถว ตารางไมเ่ หมือนกนั ใหเ้ หมือนกัน กาหนดตาแหนง่ ข้อมลู ภายในตารางใหอ้ ย่กู ง่ึ กลางท้ังแถว กาหนดตาแหน่งขอ้ มูลภายในตารางให้อยู่ชิดซา้ ยท้ังแถว กาหนดตาแหนง่ ข้อมลู ภายในตารางให้อยู่ชดิ ขวาท้งั แถว กาหนดตาแหนง่ ขอ้ มูลภายในตารางใหอ้ ยู่ชดิ ซ้าย กาหนดตาแหนง่ ข้อมลู ภายในตารางใหอ้ ย่กู ่ึงกลาง กาหนดตาแหนง่ ข้อมูลภายในตารางให้อยู่ชิดซ้าย กาหนดตาแหน่งขอ้ มูลภายในตารางใหอ้ ยู่ชดิ ขวา
Search
