ใบเนื้อหา5

วชิ า การสรา้ งเว็บไซต์ รหัสวชิ า 2204-2009 หน่วยท่ี 5 การสร้างตาราง ครูผู้สอน ศริ ินภา บุตะเขียว แผนกวชิ าคอมพวิ เตอรธ์ รุ กจิวทิ ยาลัยเทคนคิ กาญจนาภเิ ษก สมทุ รปราการ

ใบเนือ้ หา หน่วยท่ี 5 การสรา้ งตารางเนื้อหาสาระการสอน/การเรียนรู้• ด้านความรู้(ทฤษฎี) 1. การสรา้ งตาราง ลกั ษณะของตารางบนเว็บเพจ ตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column) ใช้สาหรับแสดงข้อมูลที่ต้องการจดั ลาดับ จดั เรียงเน้อื หา และจัดหมวดหมู่ เพ่ือความเปน็ ระบบระเบยี บ สะดวกในการค้นหา แก้ไขและนาไปใช้งาน การนาเสนอข้อมูลในรูปตารางประกอบเว็บเพจมีประโยชน์อย่างมาก โดยเฉพาะถ้าเป็นข้อมูลตัวเลขสถติ ิ มลู คา่ และราคาสินคา้ ซง่ึ ช่วยให้ผู้ชมเข้าถึงแหล่งข้อมูลได้อย่างรวดเร็ว และครบถ้วน ตลอดจนสามารถเปรยี บเทียบขอ้ มูลที่หาได้อย่างรวดเรว็ ภายในตารางนอกจากจะใส่ข้อความแล้ว ยังสามารถใส่รูปภาพ ภาพกราฟิก วัตถุตารางซ้อนตารางตกแตง่ ตารางดว้ ยสสี ันต่าง ๆ และใสภ่ าพพ้นื หลังไดส้ วยงาม 1. วิธีสร้างตารางบนเว็บเพจ การสรา้ งตารางบนเว็บเพจ มีขัน้ ตอน ดังนี้ 1. เปดิ เอกสารท่ตี อ้ งการจะสรา้ งตาราง 2. เลือกเมนู Insert >> Table 3. หรือใช้แปน้ พิมพ์ < Ctrl > + < T > จะได้หนา้ ต่าง Table ดงั รปู 4. เลือกลักษณะของตาราง ดังนี้

กล่มุ ของ Table Size กาหนดรายละเอียดดังนี้ Rows จานวนแถว (แกนนอน) Columns จานวนคอลัมน์ (แกนต้ัง) Table Width ความกว้างของตารางท้งั หมด และหนว่ ยวัดท่ใี ช้ Border Thickness ขนาดเส้นกรอบตาราง (มีหนว่ ยเป็นพกิ เซล) Cell Padding ระยะหา่ งระหว่างขอบเซลกบั เน้อื หาภายในเซล Cell Spacing ระยะห่างระหว่างเซลแตล่ ะเซล กลมุ่ Header เลอื กตาแหน่งของหัวเรอื่ งภายในตารางดังนี้ None ไม่ใชห้ วั เร่ืองตาราง Left กาหนดให้มหี ัวเรอื่ งทางดา้ นซา้ ย Top กาหนดใหม้ หี วั เร่ืองทางดา้ นบน Both กาหนดใหม้ ีหวั เร่ืองทง้ั ด้านซ้ายและด้านบน กล่มุ Accessibility กาหนดขอ้ มลู ท่วั ไปในตาราง ดงั นี้ Caption คาอธบิ ายกากบั ตาราง Align caption ตาแหนง่ ของข้อความ caption Summary ขอ้ ความสรุปของตาราง 5. กาหนดคา่ ต่าง ๆ ตามที่ต้องการ เช่น สร้างตารางแบบ 3 แถว 4 คอลัมน์ เม่ือคลิกปุ่ม OK จะได้ตารางลักษณะน้ี 2. การใส่ข้อมูลในตาราง ตารางทส่ี ร้างเสร็จแลว้ สามารถใสข่ อ้ มลู ลงไปได้ 2 ประเภทหลัก ๆ คือ ข้อมลู ข้อความและข้อมูลรปู ภาพหรอื วตั ถุ ข้อมูลข้อความ ขอ้ มลู ขอ้ ความ หมายรวมถึงตัวอักษร ตวั เลข อักษรพิเศษ หรอื สัญลักษณ์ต่าง ๆ มีวธิ ีการใส่ในตารางดังน้ี 1. คลิกท่เี ซลลท์ ่ีจะใส่ข้อความ 2. เคอร์เซอร์จะปรากฏอยู่ในชอ่ งเซลล์นั้น พิมพ์ขอ้ ความลงไปเหมือนโปรแกรมเวิรด์ 3. ถา้ ข้อความยาวมาก ๆ ใหก้ ดเป็น < Enter > 4. ถา้ ต้องการพมิ พข์ ้อมูลเพิ่มเตมิ ในเซลล์ใด ก็คลิกที่เซลลน์ น้ั ๆ และพิมพ์ข้อมลู ได้ทุกเซลล์ ขอ้ มูลรปู ภาพ

การใส่รูปภาพในเซลล์มีวธิ กี ารเหมอื นกับการใส่ภาพในเว็บเพจ ซึ่งมขี ้ันตอนดังน้ี 1. คลกิ ท่ชี ่องเซลล์ที่ตอ้ งการจะใส่รูปภาพ 2. คลกิ ทเี่ ครื่องมอื รปู ภาพ หรือคาสง่ั Insert >> Image 3. จะไดห้ นา้ ต่าง Select Image Source เลือกรูปภาพที่ต้องการแล้วคลกิ OK 4. ภาพจะแทรกในเซลล์นั้นทันที 5. ปรบั ขนาดของภาพให้เหมาะสมกบั ตาราง 3. การเลือกส่วนของตาราง ถ้าตารางหรือเซลลม์ ีขนาดใหญ่หรือเล็กเกินไปจนทาให้ข้อความ หรอื รูปภาพไมไ่ ด้สดั สว่ นตามที่ต้องการ ควรปรับขนาดของตารางให้เหมาะสม ดงั นี้ 1. ปรบั ขนาดแถว เลอ่ื นเมาสม์ าตรงเสน้ แนวนอน เมาสจ์ ะเปล่ียนรปู เปน็ รูปคลิกเมาส์คา้ งไว้แล้วลากยอ่ หรือขยายแถว 2. ปรบั ขนาดคอลมั น์ เลอ่ื นเมาส์มาตรงเสน้ แนวตงั้ เมาสจ์ ะเปล่ยี นรปู เปน็ รูป คลิกเมาส์ค้างไวแ้ ล้วลากยอ่ หรือขยายคอลัมน์ 3. การขยายท้ังตาราง ให้เล่ือนเมาส์มาที่ปุ่มจับด้านขวามือล่างสุดของตาราง เมาส์จะเปล่ียนเป็นรูปลูกศรสองหวั เฉียง ๆ คลิกและลากเพื่อย่อหรือขยายตารางทัง้ หมด

4. การปรบั แต่งรายละเอียดของตาราง การปรับแตง่ รายละเอียดหรือคุณสมบัติของตาราง เพ่ือให้เหมาะสมกับการใช้งานนั้นทาได้โดยใช้Properties Inspector การปรับตารางดว้ ย Properties Inspector เมื่อคลิกเลือกตารางท่ี Properties ข้ึนมาจะปรากฏคุณสมบัติของตารางขึ้นมาสามารถปรับเปลีย่ นไดต้ ามต้องการ การปรับตารางดว้ ยเมนคู าส่ัง การใช้เมนคู าส่งั ในการปรับตาราง มีวิธกี ารทา ดงั นี้ 1. คลิกทเ่ี มนู Modify แลว้ เลอื กคาส่งั ยอ่ ย Table 2. หรือคลิกขวาทีต่ าราง จะไดเ้ มนูลดั เลอื กคาสงั่ ย่อย Table

5. การจดั เรียงขอ้ มูลในตาราง ขอ้ มูลในตารางโดยเฉพาะข้อมลู ตวั อักษรท่พี ิมพ์เข้าไป ในครั้งแรกอาจจะพิมพ์ลงไปในค่าเซลล์โดยไม่ได้เรียงลาดับ แต่ถ้าต้องการเรียงลาดับข้อมูล เช่น เรียงลาดับตัวอักษร เรียงค่าจากน้อยไปมาก หรือจากมากไปน้อย กส็ ามารถทาได้ ดงั นี้ 1. คลิกเลอื กตารางทตี่ อ้ งการจดั เรยี งข้อความ 2. เลอื กคาส่ัง Commands>> Sort Table … จะได้หน้าต่าง Sort Table เพื่อกาหนดรายละเอยี ด ดังนี้ Sort by เรยี งลาดบั โดย ให้เลือกคอลัมนแ์ รกที่จะนามาเรยี งลาดบั Order ลักษณะการเรยี ง เชน่ เรยี งตามตวั อกั ษร จากนอ้ ยไปหามาก Then by แล้วเรียงลาดบั ตาม เลอื กคอลมั น์ทจ่ี ะนามาเรียงลาดับอ่นื ๆ Options ตัวเลอื กเพมิ่ เติมการเรียง 3. เลอื กรปู แบบการเรียงตามทตี่ ้องการ เช่น เรยี งจากน้อยไปหามาก ตามลาดบั ตัวอักษร 6. การเปลยี่ นจานวนแถวและคอลมั น์ การแทรกแถว

1. คลิกขวาท่ีตาแหน่งทีต่ ้องการจะแทรกแถว2. จะไดเ้ มนูลัด เลือกคาสัง่ Table >> Insert Row3. จะมแี ถวเพิม่ มาให้ 1 แถวการแทรกคอลัมน์1. คลิกขวาท่ีตาแหนง่ ท่ตี อ้ งการจะแทรกคอลัมน์2. จะได้เมนูลดั เลือกคาสง่ั Table >> Insert Column

การแทรกหลายแถวและคอลมั น์ถ้าต้องการแทรกแถวและคอลัมนจ์ านวนมากในคราวเดยี วกัน มวี ธิ ีการทา ดงั น้ี1. คลกิ ขวาทต่ี าแหนง่ ทตี่ ้องการแทรกแถวหรือคอลัมน์2. เลือกคาสัง่ Table>> Insert Rows or Columns3. จะไดห้ นา้ ตา่ ง Insert Rows or Columns4. ระบุจานวนแถวหรอื คอลมั นท์ ีต่ อ้ งการ แล้วคลิกปุม่ OKการลบแถวและคอลมั น์1. คลิกเลอื กแถวหรอื คอลัมนท์ ตี่ อ้ งการจะลบ2. กดแป้น < Delete> หรือ แปน้ < Backspace >

3. หรอื คลิกขวาเลือกเมนูลดั แล้วเลือกคาสัง่ Table >> Delete Row หรอื Delete Columnการรวมเซลล์ (Merge Cell)เซลล์ท่อี ยใู่ นตาราง สามารถรวมกันได้ เรยี กว่า Merge Cells มีวธิ ีดงั ตอ่ ไปนี้1. เลอื กเซลลท์ จ่ี ะรวมเขา้ ดว้ ยกนั2. คลกิ ขวาในตาราง แล้วเลือกคาสง่ั Table >> Merge Cells3. เซลลท์ ่ีเลือกไว้จะรวมกนั เป็นเซลล์เดยี ว

การแบง่ เซลล์ ( Split Cell)1. คลิกเลือกเซลลท์ ่ีตอ้ งการ2. คลิกขวาแลว้ เลือกคาส่งั Table >> Split Cells3. จะปรากฏหน้าต่าง Split Cell ซึ่งกาหนดรายละเอียดดังน้ี Split cell into Rows Split cell into Columns7. การตกแต่งตารางการใสส่ พี ืน้ และเสน้ ขอบตาราง1. คลกิ เลือกตารางหรือช่องเซลล์ทต่ี ้องการจะใส่สีพืน้ หลงั และเส้นขอบ2. คลิกเลอื ก จะแสดงถาดสจี านวนมาก3. คลกิ เลือกสีที่ตอ้ งการ

การใส่ภาพพื้นตาราง 1. คลิกเลือกตารางทงั้ ตาราง หรอื เลือกบางเซลล์ก็ได้ 2. คลิกทป่ี ุ่ม 3. จะได้หน้าต่าง Page Properties คลิกปุ่ม Browse เลือกภาพท่ีต้องการจะนาไป สร้างพ้ืนหลังเสรจ็ แล้วคลกิ ปุ่ม OK

4. ภาพทน่ี าไปสรา้ งจะถกู นาไปสรา้ งเปน็ พน้ื หลังทันที การเปล่ียนขนาดเสน้ ตาราง เส้นตารางทส่ี ร้างไว้นั้น หากไม่ตอ้ งการแสดงผลบน Browser ก็สามารถส่ังให้ซ่อนเส้นตาราง หรือจะเปลี่ยนขนาดของเส้นใหม้ ขี นาดใหญ่ขนึ้ หรอื เล็กลงกไ็ ด้ 1. คลิกเลือกตารางหรอื เสน้ ตารางท่ีต้องการจะเปลย่ี นขนาดเสน้ ขอบ 2. ถ้าตอ้ งการซอ่ นเส้นขอบให้เปลย่ี นเป็นเลข 0

3. แล้วคลิกพื้นที่ใด ๆ ของตาราง เส้นตารางจะถูกซ่อนไว้ แต่ยังคงมีตารางอยู่ โดยจะแสดงเป็นเสน้ ประ และจัดการกับตารางได้ตามปกติ 4. ถ้าตอ้ งการเปลย่ี นขนาดของเสน้ ตารางใหแ้ ก้ไขตวั เลขในช่อง Border เชน่ 1 2 3