บทที่ 5 การใส่ตารางบนเว็บเพจ

การสร้างตาราง
        ในการออกแบบเว็บเพจ ส่วนใหญ่แล้วในหน้าเว็บเพจ จะมีข้อมูลที่เป็นตัวหนังสือ ตัวเลข รูปภาพ แผนภูมิ กราฟ และอื่น ๆ แต่มีสิ่งหนึ่งที่จะเห็นอยู่บ่อย ๆ ในหน้าเว็บเพจ คือ ตาราง ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนนมาก มีทั้งตัวหนังสือ ตัวเลข รูปภาพ ที่ต้องการจัดระเบียบให้ดูง่าย สบายตา เช่น ตารางประวัติบุคลากร ตารางคะแนนของนักเรียน ตารางทะเบียนคุรุภัณฑ์ เป็นต้น ซึ่งตารางจะอยู่ในรูปของแถวและคอลัมน์ และจัดวางไว้ในหน้าเว็บเพจอย่างเหมาะสม
         การสร้างตาราง ใน Dreamweaver 8 มีขั้นตอนง่าย ๆ เพราะมีเครื่องมือช่วยสร้างตารางได้ตามต้องการ เช่น เราจะสร้างตาราง 4 คอลัมน์ 4 แถว, มีเส้นขอบขนาด 2 พิกเซล, ระยะระหว่างขอบเซลล์กับข้อความภายในเซลล์ (Cell padding) เป็น 5 พิกเซลล์ , ระยะห่างระหว่างแต่ละเซลล์ (Cell spacing) เป็น 5 พิกเซล และกำหนดให้แถวแรกของตารางเป็นหัวข้อ ดังภาพ

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

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

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

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

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

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

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

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

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

 

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


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

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

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

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

  1. เลื่อนเมาส์ไปที่ขอบตาราง จนเคอร์เซอร์เปลี่ยนเป็นรูป แล้วคลิกจะเกิดการเลือกทั้งตาราง หรือ
  2. ให้คลิกที่เซลล์ใดก็ได้ในตาราง และใช้คำสั่ง Modify>Table>Select Table หรือ
  3. คลิกที่แท็ก < table > ที่แถบสถานะด้านล่างของเว็บที่กำลังทำงาน ดังภาพ

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

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

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

 

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

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

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

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

 

       

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

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

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

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

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

  1. หมายเลข 1 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่ชิดซ้ายของช่องตาราง
  2. หมายเลข 2 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่กึ่งกลางของช่องตาราง
  3. หมายเลข 3 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่ชิดขวาของช่องตาราง

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

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

  1. หมายเลข 1 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่บนสุดของช่องตาราง
  2. หมายเลข 2 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่กึ่งกลางของช่องตาราง
  3. หมายเลข 3 คลิกเลือก เป็นการจัดให้ข้อมูลอยู่ล่างสุดของช่องตาราง

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

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

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

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

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

การรวมเซลล์

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

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

         2.คลิกเมาส์ที่ปุ่ม ที่ Property Inspector ของเซลล์ ดังภาพ

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

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


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

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

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

         2.คลิกเมาส์ที่ปุ่ม ที่ Property Inspector ของเซลล์ ดังภาพ

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

       ผลลัพธ์ที่ได้ ในแถวแรกเซลล์จะถูกแบ่งออกเป็น 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. คลิกตั้งเคอร์เซอร์ในเซลล์ที่ต้องการจะคืนสภาพเดิมก่อนปรับขยาย
  2. คลิกขวา ใช้ คำสั่ง Table >Decrease Row Span หรือ Table >Decrease Column Span ดังภาพ

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

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

  1. คลิกเลือกที่ตาราง ดังภาพ

       2.กำหนดค่า ความกว้างในช่อง ความสูง ในช่อง ที่ Property Inspector ของตาราง ดังภาพ

       จะได้ผลลัพธ์ ดังภาพ

การปรับความสูงและความกว้างของช่องเซลล์

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

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

2.กำหนดตัวเลขความกว้าง ความสูง ที่ Property Inspector ของเซลล์ จากตัวอย่าง กำหนดให้ช่องเซลล์ กว้าง 50% สูง 40 พิกเซล ดังภาพ

3.จะได้ผลลัพธ์ ดังภาพ

การซ้อนตาราง
        เราสามารถสร้างตารางซ้อนตารางที่มีอยู่แล้ว เพื่อนำเสนอข้อมูลเพิ่มเติมได้ โดยดำเนินการ ดังนี้

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

2.คลิกเมาส์รูปตาราง ที่กลุ่มเครื่อง Common เพื่อแทรกตารางใหม่ ดังภาพ

3.กำหนดรูปแบบของตารางที่จะแทรก แล้วคลิกปุ่ม OK ดังภาพ

 

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

การกำหนดสีให้กับพื้นตาราง
        เราสามารถใส่สี ให้กับตารางได้ โดยกำหนดที่ Property Inspector ดังนี้

  1. คลิกเลือกตาราง ดังภาพ

2.กำหนด Property Inspector ของตาราง ดังภาพ

4.จะปรากฏผลลัพธ์ ดังภาพ

5.ถ้าต้องการใส่สีเส้นขอบตาราง ให้เลือกใส่ที่ Brdr color เลือกสีตามต้องการ จากตัวอย่างเลือกสีน้ำเงิน และกำหนดความหนาของเส้นขอบตาราง เป็น 2 ดังภาพ

6.จะได้ผลลัพธ์ เป็นตารางสีเหลือง มีเส้นขอบเป็นสีน้ำเงิน ดังภาพ

7.ถ้าต้องการให้ตาราง มีเส้นขอบสีน้ำเงิน เป็นเส้นทึบ ที่ CellSpace ให้กำหนด 0 ดังภาพ

8.จะปรากฏผลลัพธ์ ดังภาพ

การนำภาพมาปูเป็นพื้นตาราง
        เราสามารถนำภาพมาปูเป็นพื้นตารางได้ โดยกำหนดที่ Property Inspector ดังนี้

  1. คลิกเลือกตาราง
  2. เลือกกำหนดภาพ Bg Image ที่ Property Inspector ของตาราง โดย Browse for File เพื่อเลือกภาพ

3.จะปรากฏหน้าจอให้เลือกภาพดังนี้ เมื่อเลือกภาพได้แล้ว คลิก OK

4.เมื่อเลือกภาพได้แล้ว จะปรากฏชื่อภาพ ที่ช่อง Bg Image ดังภาพ

5.จะปรากฏผลลัพธ์ ดังภาพ

 

จัดทำโดย

น.ส ชุติมา ฉัตรคำ

กลับไปหน้าแรก