หน่วยการเรียนรู้ 5

ขั้นตอนในการสร้างตาราง มี ให้เลือก 3 วิธี คือ

• • วิธีที่ 1 เลือกเมนู Insert >Table ดังภาพ

• • วิธีที่ 2 ที่กลุ่มเครื่องมือ Common หรือกลุ่มเครื่องมือ Layout เลือกคลิกที่

• • วิธีที่ 3 กดที่คีย์บอร์ด < Ctrl + Alt + T>

โดยทั้ง 3 วิธีนี้ จะแสดงหน้าต่าง Table ใช้สำหรับกำหนดรายละเอียดเกี่ยวกับตาราง ดังภาพ

รายละเอียดของตาราง สามารถอธิบายได้ ดังนี้

• • หมายเลข 1 Rows : กำหนดจำนวนแถว

  • หมายเลข 2 Columns : กำหนดจำนวนคอลัมน์

  • หมายเลข 3 Table width : ความกว้างของตาราง มีหน่วยเป็น พิกเซล หรือเปอร์เซนต์

  • หมายเลข 4 Border thickness : ความหนาของตาราง

  • หมายเลข 5 Cell padding : ระยะห่างระหว่างขอบเซลล์กับข้อความภายในเซลล์

  • หมายเลข 6 Cell spacing : ระยะห่างระหว่างเซลล์แต่ละเซลล์ ทั้งแนวตั้งและแนวนอน

  • หมายเลข 7 None : ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง

  • หมายเลข 8 Left : กำหนดให้คอลัมน์แรกเป็นหัวข้อของเซลล์

  • หมายเลข 9 Top : กำหนดให้แถวแรกของตารางเป็นหัวข้อของเซลล์

  • หมายเลข 10 Both : กำหนดให้ทั้งแถวและคอลัมน์แรกเป็นหัวข้อของเซลล์

  • หมายเลข 11 Caption : กำหนดหัวข้อของตาราง

  • หมายเลข 12 Align caption : จัดวางหัวข้อของตารางไว้ในตำแหน่งที่ต้องการ

    • • default : ไม่มีการกำหนดค่า ใช้ค่าที่กำหนดแบบอัตโนมัติ คือ จัดวางหัวข้อของตารางไว้ข้างบนและจัดวางตรงกลางของตาราง ดังภาพ

• • • • Top : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งตรงกลางของตาราง

      • bottom : จัดวางหัวข้อของตารางไว้ด้านล่าง และจัดตำแหน่งตรงกลางของตาราง

      • left : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งชิดซ้ายของตาราง

      • right : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งชิดขวาของตาราง

• • หมายเลข 13 Summary : เขียนคำอธิบายเกี่ยวกับตาราง แสดงให้เห็นบนหน้าเว็บ

  • หมายเลข 14 คลิกปุ่ม OK เมื่อกำหนดค่าตามต้องการเสร็จแล้ว

การปรับขนาดช่องตาราง

เมื่อเรากำหนดให้ ตารางมี 4 คอลัมน์ 4 แถว ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์ (Cell padding) เป็น 5 พิกเซล และระยะห่างระหว่างเซลล์แต่ละเซลล์ (Cell spacing) เป็น 2 พิกเซล จะได้ดังภาพ

เมื่อเราต้องการที่จะปรับแต่งขนาดหรือยืดหดช่องตารางในคอลัมน์หรือแถว สามารถทำได้โดยวางเคอร์เซอร์ ที่เส้นทั้งแนวตั้ง และแนวนอน เคอร์เซอร์จะเปลี่ยนเป็นลูกศร 2 ทาง เราสามารถดึงยืดหด ได้ตามความต้องการ ดังภาพ

การใส่ข้อมูลและภาพในตาราง

เมื่อปรับแต่งช่องตารางได้ตามต้องการแล้ว เราสามารถใส่ข้อความในตารางที่เราสร้างได้ โดยตั้งเคอร์เซอร์ที่ช่องเซลล์ที่ต้องการใส่ข้อความและพิมพ์ข้อความลงไป ดังภาพ

การใส่ภาพในตาราง ก็ทำเช่นเดียวกับการใส่ข้อความ คือ ถ้าต้องการใส่ภาพในเซลล์ไหน ให้ตั้งเคอร์เซอร์ในเซลล์นั้น แล้วใช้เครื่องมือแทรกภาพ เพื่อเข้าไปเลือกไฟล์ภาพ ที่เก็บอยู่ในโฟลเดอร์ images ได้แล้วคลิกปุ่ม OK ดังภาพ

ภาพจะเข้ามาปรากฏ ในช่องเซลล์ ที่เราเลือกตามต้องการ ดังภาพ

เมื่อเรานำภาพเข้ามาไว้ในเซลล์ได้ตามต้องการแล้ว สามารถปรับแต่งภาพได้ โดยคลิกที่ภาพ แล้วกำหนดค่าของภาพได้จาก Property Inspector ดังภาพ

การกำหนดรายละเอียดของภาพ มีดังนี้

• • หมายเลข 1 ใส่ชื่อภาพ

  • หมายเลข 2 ปรับความสูงของภาพ

  • หมายเลข 3 ปรับความกว้างของภาพ

  • หมายเลข 4 แสดงที่เก็บไฟล์ภาพ

  • หมายเลข 5 สำหรับการเชื่อมโยงไปยังข้อมูลหรือเว็บไซต์อื่น สามารถใส่ที่อยู่ หรือคลิกเลือกได้จากโฟลเดอร์ด้านขวาของช่อง

  • หมายเลข 6 ใส่ข้อความกำกับภาพ

  • หมายเลข 7 กำหนดความหนาเส้นขอบภาพ

  • หมายเลข 8 เลือกจัดตำแหน่งการวางภาพ

• หมายเลข 9 กำหนดตำแหน่งของภาพในหน้าเว็บเพจ

การเลือกตาราง แถว คอลัมน์ และเซลล์

การเลือกตารางทั้งตารางเพื่อปรับแต่ง สามารถเลือกทำได้ 3 วิธีดังนี้

• 1. เลื่อนเมาส์ไปที่ขอบตาราง จนเคอร์เซอร์เปลี่ยนเป็นรูป

• 1. แล้วคลิกจะเกิดการเลือกทั้งตาราง หรือ

  2. ให้คลิกที่เซลล์ใดก็ได้ในตาราง และใช้คำสั่ง Modify>Table>Select Table หรือ

  3. คลิกที่แท็ก < table > ที่แถบสถานะด้านล่างของเว็บที่กำลังทำงาน ดังภาพ

การเลือกแถว

การเลือกแถว ทำได้ง่าย ๆ โดยนำเคอร์เซอร์ไปวางที่หน้าแถวที่ต้องการจะเลือก เคอร์เซอร์ จะเปลี่ยนเป็นรูปลูกศร ให้คลิกเลือก แถวจะถูกเลือกทั้งแถวตามต้องการ ดังภาพ

อีกวิธีหนึ่งในการเลือกแถว คือ คลิกเลือกเซลล์ใดก็ได้ในตาราง แล้วคลิกแท็ก < tr > ทุกเซลล์ในแถวนั้นจะถูกเลือก ดังภาพ

การเลือกคอลัมน์

การเลือกคอลัมน์ ดำเนินการคล้าย ๆ กับการเลือกแถว คือ นำเคอร์เซอร์ไปวางไว้บนคอลัมน์ที่ต้องการเลือก จะปรากฏลูกศรสีดำ ให้คลิกเมาส์ คอลัมน์จะถูกเลือกทั้งคอลัมน์ ดังภาพ

การเลือกเซลล์

การเลือกเซลล์ ทำได้ง่าย ๆ 3 วิธี ด้วยกัน คือ

• 1. ถ้าต้องการเลือกเซลล์เดียว ให้วางเคอร์เซอร์ที่เซลล์นั้น ๆ แล้วคลิกแท็ก < td > ข้างล่าง ดังภาพ

• 1. ต้องการเลือกหลายเซลล์ที่อยู่ติดกันในตาราง ให้คลิกเลือกเซลล์แรก และกดคีย์ < Shift > ค้างไว้ แล้วกดเซลล์สุดท้าย จะเป็นการเลือกเซลล์ทุกเซลล์ที่อยู่ระหว่างเซลล์ทั้งสอง เช่น คลิกที่เซลล์ เลข 1 และคลิกที่เซลล์ M.S.in Adult Education เซลล์ที่เป็นชื่อ และภาพ ก็จะถูกเลือกด้วย ดังภาพ

• 1. ถ้าต้องการเลือกเซลล์ที่ไม่อยู่ติดกัน ให้คลิกเลือกที่เซลล์แรกที่ต้องการ แล้วกดคีย์ < Ctrl > ค้างไว้ แล้วเลือกคลิกเซลล์ต่อไป เซลล์จะถูกเลือกได้ตามความต้องการ ดังภาพ

การปรับแต่งรายละเอียดของตาราง

การปรับแต่งรายละเอียดของตาราง นอกจากจะใช้เมาส์ในการปรับแต่งแล้ว เรายังปรับแต่งรายละเอียดของตารางได้ โดยใช้ Property Inspector เมื่อเราคลิกที่ตาราง คอลัมน์ หรือเซลล์ ในตาราง ก็สามารถที่จะปรับขนาด เซลล์ แถว คอลัมน์ ปรับความสูง ความกว้าง ความหนาของตาราง เลือกตำแหน่งการวางตารางบนเว็บเพจได้ ดังภาพ

เมื่อเราคลิกเลือกตาราง จะเกิด Property Inspector ของตาราง ให้เราปรับรายละเอียดได้ดังนี้

• • หมายเลข 1 กำหนดชื่อของตารางได้

  • หมายเลข 2 กำหนดจำนวนแถวและคอลัมน์

  • หมายเลข 3 กำหนดความกว้างและความสูงของช่องตาราง

  • หมายเลข 4 กำหนดสีพื้นหลังของตาราง

  • หมายเลข 5 กำหนดสีพื้นหลังของตาราง

  • หมายเลข 6 กำหนดระยะห่างระหว่างข้อความในตารางกับขอบตาราง ค่านี้มีผลกับทั้งตาราง

  • หมายเลข 7 กำหนดระยะห่างระหว่างเซลที่อยู่ในตาราง และมีผลทั้งตาราง

  • หมายเลข 8 กำหนดรูปภาพพื้นหลังให้กับตาราง

  • หมายเลข 9 กำหนดการวางตำแหน่งของตารางบนหน้าเว็บ

  • หมายเลข 10 กำหนดความหนาของเส้นขอบตาราง

  • หมายเลข 11 คลิกที่ปุ่ม เพื่อลบค่าความสูง หรือความกว้างที่กำหนดให้กับตาราง

การจัดเรียงข้อความในตาราง

การจัดเรียงข้อความในตาราง จะทำให้ดูสวยงาม เป็นระเบียบ โดยเราสามารถจัดเรียงข้อความ ได้ทั้งแนวตั้งและแนวนอน ดูได้จากภาพ ดังนี้

จากภาพเป็นการจัดเรียงข้อมูล ตามแนวนอน โดยคลิกที่ช่องตาราง แล้วคลิกเลือกที่ Horz จาก Property Inspector

• 1. หมายเลข 1 คลิกเลือก

เป็นการจัดเรียงข้อมูลแบบปกติ คือ อยู่ชิดซ้ายของช่องตาราง

จากภาพเราจะแทรกแถว ให้เราตั้งเคอร์เซอร์ในช่องตารางที่ต้องการ แล้วคลิกขวา ใช้คำสั่ง Table>Insert Row จะปรากฏแถวเพิ่มขึ้น ดังภาพด้านล่างนี้

การแทรกคอลัมน์

การแทรกคอลัมน์ ให้เราตั้งเคอร์เซอร์ในช่องตารางที่ต้องการจะแทรก ตัวอย่าง เราจะแทรกคอลัมน์ ระหว่างชื่อ กับรูปภาพ ให้เราตั้งเคอร์เซอร์ที่ช่องรูปภาพแล้วคลิกขวา ใช้คำสั่ง Table>Insert Column ดังภาพ

เมื่อใช้คำสั่ง Table>Insert Column จะปรากฏคอลัมน์เพิ่มขึ้นมา 1 คอลัมน์ และอยู่ระหว่างคอลัมน์ชื่อ และคอลัมน์รูปภาพ ดังภาพ

การแทรกหลายแถว/คอลัมน์

ถ้าเราต้องการจะแทรกหลายแถว หรือหลายคอลัมน์ ในทีเดียวกัน สามารถกระทำได้ โดยไม่ต้องแทรกทีละแถว ทีละคอลัมน์ ให้ตั้งเคอร์เซอร์ในช่องตารางที่ต้องการจะแทรก ตัวอย่าง เราต้องการเพิ่ม 2 คอลัมน์ ต่อจากช่อง ชื่อ ก็คลิกตั้งเคอร์เซอร์ในช่องชื่อ แล้วคลิกขวา เลือกคำสั่ง Table>Insert Rows or Columns...ดังภาพ

เมื่อคลิกเลือก Insert Rows or Columns...แล้วจะปรากฏหน้อจอ ดังนี้

จากภาพ เราต้องกำหนด ดังนี้

• 1. หมายเลข 1 เลือกว่าจะแทรกแถวหรือคอลัมน์ จากตัวอย่าง เราต้องการแทรกคอลัมน์ ก็คลิกเลือกคอลัมน์

  2. หมายเลข 2 ให้เลือกระบุจำนวนคอลัมน์ที่ต้องการแทรก ในที่นี้ เราต้องการแทรก 2 คอลัมน์ ก็ใส่เลข 2

  3. หมายเลข 3 เลือกว่าจะแทรกก่อนหรือหลังคอลัมน์ ในแถวที่เลือก แล้วคลิกปุ่ม OK

ผลลัพธ์ จะปรากฏคอลัมน์เพิ่มขึ้น 2 คอลัมน์ และปรับขนาดของคอลัมน์ได้ตามต้องการ ดังภาพ

การลบแถวและคอลัมน์

เมื่อเราเพิ่มแถว หรือคอลัมน์ได้ ก็สามารถที่จะลบแถวหรือคอลัมน์ที่เราไม่ต้องการใช้งานได้เช่นกัน โดยดำเนินการง่าย ๆ คือ คลิกเลือกแถว หรือคอลัมน์ที่ต้องการจะลบ ดังภาพ

เมื่อเลือกคอลัมน์ที่ต้องการจะลบได้แล้ว ให้ดำเนินการ ดังนี้

• 1. กดปุ่ม Delete ที่คีย์บอร์ด หรือ

  2. ตั้งเคอร์เซอร์ในช่องตารางที่ต้องการจะลบ แล้วคลิกขวา เลือกคำสั่ง Table > Delete Column ดังภาพ

• 1. หรือตั้งเคอร์เซอร์ในช่องตารางที่ต้องการจะลบ แล้วเลือกคำสั่ง Modify >Table > Delete Column ดังภาพ

• 1. การลบแถวก็ทำเช่นเดียวกับ Column คือ เลือกแถวที่ต้องการจะลบ กดปุ่ม Delete ที่คีย์บอร์ด หรือตั้งเคอร์เซอร์ในช่องตารางที่ต้องการจะลบ แล้วคลิกขวา เลือกคำสั่ง Table > Delete Row หรือเลือกคำสั่ง Modify >Table > Delete Row

การรวมและการแบ่งเซลล์

ในการจัดข้อมูลในตารางเพื่อความเหมาะสม เป็นระเบียบเรียบร้อย เราสามารถรวมและแบ่งเซลล์ ได้

การรวมเซลล์

การรวมเซลล์ ดำเนินการตามขั้นตอน ดังนี้

• 1. การรวมเซลล์ จะต้องเป็นเซลล์ที่อยู่ติดกัน โดยให้กด Ctrl ค้างไว้ พร้อมกับเลือกเซลล์ที่ต้องการรวม ดังภาพ

• 1. คลิกเมาส์ที่ปุ่ม

• 1. ที่ Property Inspector ของเซลล์ ดังภาพ

• 1. หรือคลิกเมาส์ขวา เลือกคำสั่ง Table > Merge Cells ดังภาพ

ผลลัพธ์ที่ได้ ในแถวแรกเซลล์ทุกเซลล์จะถูกรวมกัน ดังภาพ

การแบ่งเซลล์

การแบ่งเซลล์ ดำเนินการตามขั้นตอน ดังนี้

• 1. การแบ่งเซลล์ ให้คลิกตั้งเคอร์เซอร์ในเซลล์ที่ต้องการจะแบ่ง ดังภาพ

1. คลิกเมาส์ที่ปุ่ม

1. ที่ Property Inspector ของเซลล์ ดังภาพ

1. จะปรากฏหน้าจอ ให้เลือกแบ่งเซลล์ตามแถวหรือคอลัมน์ ในที่นี้ เราจะเลือกเป็น Column และระบุจำนวน เป็น 2 Column แล้วคลิก OK ดังภาพ

1. ผลลัพธ์ที่ได้ ในแถวแรกเซลล์จะถูกแบ่งออกเป็น 2 คอลัมน์ตามต้องการ ดังภาพ

การขยายและลดความกว้างเซลล์ในตาราง

ในเรื่องของเซลล์ นอกจากจะรวมและแยกเซลล์แล้ว ในแต่ละช่องเซลล์ ยังสามารถที่จะขยายและลดความกว้างของเซลล์ในตารางได้

การขยายเซลล์

การขยายเซลล์ เราสามารถเพิ่มความกว้างของเซลล์ได้ทั้งแนวตั้ง และแนวนอน โดยตั้งเคอร์เซอร์ ในช่องเซลล์ที่ต้องการจะปรับ แล้วคลิกเมาส์ขวา ใช้คำสั่ง Table > Increse Row Span เพื่อเพิ่มความกว้างของเซลล์ในแนวตั้ง หรือเลือกคำสั่ง Table > Increse Column Span เพิ่มความกว้างเซลล์ตามแนวนอน ไปทางขวา ดังภาพ

การขยายเซลล์ โดยใช้คำสั่ง Table > Increse Row Span จะได้ดังภาพ

การขยายเซลล์ โดยใช้คำสั่ง Table > Increse Column Span จะได้ดังภาพ

การลดความกว้างของเซลล์

เมื่อเราปรับขยายช่องเซลล์ ทั้งแนวตั้งและแนวนอนได้แล้วแต่เราต้องการที่จะปรับช่องเซลล์ ให้กลับคืนสู่สภาพเดิมได้ ให้ใช้คำสั่ง Table >Decrease Row Span เป็นการคืนสภาพเซลล์ในแถว หรือใช้คำสั่ง Table >Decrease Column Span เป็นการคืนสภาพเซลล์ในคอลัมน์ โดยดำเนินการดังนี้

• 1. คลิกตั้งเคอร์เซอร์ในเซลล์ที่ต้องการจะคืนสภาพเดิมก่อนปรับขยาย

1. คลิกขวา ใช้ คำสั่ง Table >Decrease Row Span หรือ Table >Decrease Column Span ดังภาพ

1. จากภาพเป็นการคืนสภาพคอลัมน์ เมื่อใช้คำสั่งแล้ว จะได้ดังภาพ