รายวิชา คอมพิวเตอร์ (การเขียนเว็บไซต์โดยใช้โปรแกรม Deramweaver MX)

เรื่อง การสร้างตารางบนเว็บเพจ

1. สร้างตารางและใส่ข้อมูลในตาราง

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

         Table มีส่วนช่วยในการจัดระเบียบข้อความและรูปภาพทั้งหลาย มีเพียงโปรแกรมใน Dreamweaver เท่านั้นที่สามารถเปลี่ยนเวบที่ออกแบบด้วยเลเยอร์มาเป็นตารางได้ทำให้เราสามารถออกแบบได้อย่างอิสระในตอนแรก จากนั้นจึงเปลี่ยนมาใช้ระบบตารางเพื่อให้เปิดดูใน Browser ได้ทุกระบบไม่ผิดเพี้ยน (สาเหตุที่ Dreamweaver ต้องมีคำสั่งแบบนี้ เพราะ Browser รุ่นเก่าไม่สามารถใช้เลเยอร์ได้นั่นเอง)
         Tool บางตัวที่ใช้เขียนเว็บเพจจะใช้หลัก Table ในการออกแบบเป็นหลักเช่น FRONTPAGE 98 เนื่องจากใช้งานง่าย และเมื่อดูใน Browser จะได้ผลไม่ผิดเพี้ยนเลย แต่มีข้อด้อยคือไม่ให้ความอิสระในการออกแบบเหมือนเลเยอร์

           1.1 การสร้างตาราง

          ก่อนอื่นให้ทำความรู้จักกับส่วนของตารางก่อน

          1. เลือกตำแหน่งที่ต้องการใส่ตาราง ด้วยการวางเคอร์เซอร์ที่ตำแหน่งนั้น คลิกปุ่ม Insert Table
หรือเลือกเมนู Insert > Table

       2. จะมี Dialog box ขึ้นมาให้เลือกจำนวนและค่าต่างๆ
              
Rows จำนวนแถวที่ต้องการ
              Columns จำนวนคอลัมน์ที่ต้องการ
              Width ความกว้างของตาราง หน่วยที่ใช้จะเป็นเปอร์เซ็นต์หรือพิกเซลก็ได้
              Border ความหนาของขอบตาราง
              Cell Padding ระยะระหว่างข้อความในตารางกับขอบตาราง
              Cell Spacing ระยะระหว่างแต่ละเซลล์ในตาราง
เมื่อกำหนดรายละเอียดต่างๆ เสร็จแล้วคลิกเมาส์ที่ปุ่ม OK ก็จะได้ตารางตามรายละเอียดที่กำหนด

ใส่ข้อมูลในตาราง

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

 
2. การปรับแต่งตาราง
ปรับขนาดช่องตาราง
         หากเราต้องการปรับขนาดของช่องตารางให้ Click ที่เส้นตารางและลากเมาส์ปรับขนาดได้
และเรายังสามารถปรับขนาดได้จาก Property inspector ได้โดยการคลิกที่ขอบของ Tableให้ทำงาน
การเลือกตาราง แถว คอลัมน์ และเซลล์
         ตารางสามารถเลือกส่วนที่จะเซ็ทค่าต่างได้หลายแบบ โดยจะเลือกแก้ไขทั้งตาราง หรือแก้ไขทีละช่อง หรือ แก้ไขทีละแถว หรือที่ละคอลัมน์ก็ได้
การเลือกทั้งตารางเพื่อแก้ไข
         1. ให้เลื่อนเมาส์ไปที่ตารางจนตัวชี้เมาส์เปลี่ยนเป็น จึงคลิกเมาส์ ทั้งตารางก็จะถูกเลือก (วิธีนี้ค่อนข้างลำบากโดยเฉพาะถ้าตารางนั้นซ้อนอยู่ใน เลเยอร์อีกที)
         2. คลิกในตารางส่วนใดก็ได้หนึ่งครั้ง แล้วคลิกขวาที่เมาส์เลือก Table > select table
         3. คลิกเลือกเซลล์ใดก็ได้ในตาราง และเลือก Modify > Table > Select Table
การเลือกเฉพาะในแถว
         1. นำเมาส์ไปวางที่หน้าแถวที่ต้องการเลือก จะปรากฏลูกศรสีดำอยู่หน้าแถวนั้น
         2. ให้คลิกเมาส์จะเป็นการเลือกแถวทั้งแถว หรือจะคลิกเลือกเซลล์ใดก็ได้ในตารางและคลิกแท็ก <tr> ที่เป็นของแถวนั้น
         3. คลิกเลือกช่องเซลล์ที่หัวแถวที่เราจะเลือกแล้วลากเมาส์ไปทางขวาก็จะเป็นการเลือก
แถวทั้งแถวนั้น
การเลือกเฉพาะคอลัมน์
         1. นำเมาส์ไปวางที่บนคอลัมน์ที่ต้องการเลือก จะปรากฏลูกศรสีดำอยู่บนคอลัมน์นั้น
         2. ให้คลิกที่ลูกศรจะเป็นการเลือกทั้งเซลล์นั้น
การเลือกเซลล์
         1. การเลือกเซลล์เดียว ให้คลิกเลือกเซลล์ที่ต้องการได้เลย
         2. การเลือกหลายเซลล์ที่อยู่ติดกัน ให้เราเลือกเซลล์ที่ต้องการแล้วลากเมาส์ไปยังเซลล์สุดท้ายได้เลย
         3. การเลือกเซลล์ที่ไม่อยู่ติดกันในตาราง ให้คลิกเมาส์เลือกเซลล์แรก และกดปุ่ม Ctrl ที่ Keyboard ค้างไว้แล้วเลือกเซลล์ต่อไปตามต้องการ
การปรับแต่งรายละเอียดของตาราง
         นอกจากการใช้เมาส์ปรับขนาดของตารางแล้ว เรายังสามารถกำหนดขนาดที่แน่นอนของ ตารางได้จากแถบ Properties โดยเมื่อเราคลิก เลือกทั้งตารางแล้ว ก็จะสามารถปรับขนาดของเซลล์ แถว คอลัมน์ ความสูง ความกว้าง และความหนาของขอบตารางได้ อีกทั้งสามารถเลือกตำแหน่งที่จะวางตารางไว้บนเว็บเพจได้

Table Id : ตั้งชื่อไว้เรียกอ้างอิง
Rows : สามารถเพิ่มจำนวนแถวได้โดยพิมพ์ตัวเลขเพิ่มเข้าไป
Cols : สามารถเพิ่มจำนวน Columns ได้โดยการเพิ่มจำนวนตัวเลขเข้าไป
W และ H : ความกว้างและความสูงของตาราง ถ้าความกว้างถูกเซ็ทหน่วยเป็นเปอร์เซ็น
หมายถึง สั่งให้ Browser ปรับความกว้างของหน้าจอซึ่งจะทำให้ความกว้างของตารางไม่แน่นอน ถ้าระบุเป็นหน่วย Pixel หรือ หน่วยอื่นจะดีกว่า
Cell Pad กำหนดระยะระหว่างข้อความกับขอบตาราง ค่ามาตรฐานคือ 1
Cell Space กำหนดระยะห่างระหว่างเซลล์ที่อยู่ในตาราง ค่ามาตรฐานคือ 2
Align : กำหนดชิดซ้าย กลาง หรือ ขวา
Border : ขนาดขอบของตาราง
Brdr Color : สีของขอบของตาราง
Bg Color : สีพื้นหลังของตาราง
Bg Image : ใช้รูปเป็นพื้นหลังของตาราง

         1.2 Porperty inspector ของ Row ,Column และ Cell
         Porperty ในการใช้งานแต่ละอย่างจะไม่แตกต่างกันขึ้นอยู่กับที่เราทำการเลือก Select ไม่ว่าจะเป็น Row Column เราสามารถทราบได้ว่าเราเลือกส่วนใดของตารางโดยดูที่มุมซ้ายของแถบ Properties

Property ส่วนบนจะเป็นการควบคุมตัวอักษรหรือรูปภาพที่นำมาใส่ในตารางเหมือนกับ
Property ของ Font ที่ได้กล่าวมาแล้ว
Property ส่วนล่างเป็น Property ที่ควบคุมตารางในส่วนของ Row Column Cell
W และ H : ขนาดความกว้างของ Cell ไม่จำเป็นต้องปรับ
No Wrap : ช่อง Wrap จะสั่งให้โปรแกรมทำการตัดคำเมื่อเจอประโยคยาวๆ แต่จะขยายช่อง
ให้ตามแนวนอนไปเรื่อยๆ จนกระทั่งหมดคำแล้วจึงขึ้นบรรทัดใหม่ (ไม่ต้องติ๊กช่องนี้)
Head : ในช่อง Head จะทำให้ช่องตารางนั้นกลายเป็นข้อความ เหมือนส่วนหัวตาราง คือเป็นส่วนใหญ่ ตัวหนา และจัดตำแหน่งอยู่กึ่งกลางเสมอ
Bg : การนำรูปภาพมาทำเป็นพื้นหลัง
Bg: เลือกสีทำเป็นพื้นหลังถ้าเลือกรูปภาพแล้วไม่ต้องเลือกสี
Brdr : เลือกสีของขอบพร้อมทั้งขนาดของขอบ

คำสั่งเกี่ยวกับการปรับแต่งตาราง
         นอกจากใช้แถบ Properties เราสามารถเรียกคำสั่ง Modify > Table หรือจะคลิก
เมาส์ ปุ่มขวาตรงตารางที่ต้องการปรับแต่งและเลือกคำสั่ง Table ในเมนูย่อยก็ได้
3. วิธีแทรกตารางและลบตาราง
การแทรกแถวและคอลัมน์
         1. การแทรกแถว
                  1.1 นำเคอร์เซอร์ไปวางยังตำแหน่งที่ต้องการจะแทรกแถว
                  1.2 คลิกเมาส์ปุ่มขวาจะปรากฏเมนูย่อยให้เลือก Table>Insert Row หรือกดคีย์ Ctrl+M
                  1.3 จะปรากฏแถวขึ้นมาหนึ่งแถว ซึ่งมีขนาดของเซลล์เท่ากับขนาดของแถวเดิมที่เข้าไปแทรก
                  1.4 วิธีลัดในการเพิ่มแถวทำได้โดยการคลิกเมาส์ที่เซลล์สุดท้ายของตารางแล้วกด Tab ที่คีย์บอร์ด จะเป็นการเพิ่มแถวถัดไปอีก 1 แถว
         2. การแทรกคอลัมน์
                  2.1 นำเคอร์เซอร์ไปวางยังตำแหน่งที่ต้องการจะแทรกคอลัมน์
                  2.2 คลิกเมาส์ปุ่มขวาจะปรากฏเมนูย่อยให้เลือก Table>Insert Column หรือกดคีย์ Ctrl+Shift+A
                  2.3 จะปรากฏคอลัมน์ขึ้นมาหนึ่งคอลัมน์ ตรงตำแหน่งที่เคอร์เซอร์วางอยู่
         3. การแทรกหลายแถว/คอลัมน์
                  ในกรณีที่เราต้องการเพิ่มหลายแถวหรือหลายคอลัมน์ เราไม่ต้องใช้คำสั่งแทรกทีละแถว
หรือที่ละคอลัมน์ให้เสียเวลา สามารถทำได้ดังนี้
                  3.1 คลิกเมาส์ปุ่มขวาเลือกคำสั่ง Table > Insert Row or Column
                  3.2 ที่ไดอะล็อกบ็อกซ์ให้เลือกว่าจะแทรกแถว/คอลัมน์ และยังมีให้เลือกว่าจะแทรกจำนวนเท่าไหร่
                  3.3 เลื่อนปรับขนาดของแถว/คอลัมน์ ที่แทรกเข้ามาใหม่ตามความเหมาะสม
การลบแถวและคอลัมน์
         สามารถทำได้โดย เลือกแถวที่ต้องการจะลบ แล้วกดปุ่ม Delete
การรวมและการแบ่งเซลล์
         1. การรวมเซลล์
                  1.1 เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน)
                  1.3 เมื่อรวมกันแล้วจะได้ผลลัพธ์ที่มีขนาดใหญ่ขึ้น
         2. การแบ่งเซลล์
                  2.1 คลิกเมาส์เลือกเซลล์ที่ต้องการแบ่ง
                  2.2 คลิกเมาส์ปุ่ม
                  2.3 จากนั้นจะมี Dialog box ให้ใส่ค่าดังนี้
                  Split Cell Into : ให้ทำการเลือกว่าต้องการเพิ่ม Cell ไปในทางไหน Row หรือ Columns
                  Number of Rows : ระบุจำนวน Cell ที่ต้องการ ส่วนมากโปรแกรมจะคำนวนจำนวนมาให้พอดีแล้ว
                   คลิก OK
         การใช้ตารางในการออกแบบเป็นสิ่งที่จำเป็นอย่างยิ่งเพื่อช่วยเพิ่มความสวยงามและการจัดระเบียบได้อย่างถูกต้อง และ Browser ก็สามารถแสดงผลได้เป็นอย่างดีไม่ว่า Browser จะเป็นรุ่นไหน เก่า หรือ ใหม่ ก็ไม่เป็นปัญหาในการแสดงผล และสามารถนำตารางมาประยุกต์ใช้ช่วยเพิ่มความเร็วในการ Load รูปภาพโดยการนำรูปภาพมาแบ่งเป็นชิ้นส่วนเล็กๆ แล้วนำมาใส่ในตารางทีละช่องและกำหนดไม่ให้แสดงขอบของตารางพอที่ Browser ก็จะเหมือนกับว่ารูปที่นำมาต่อกันในตารางนั้นเป็นรูปเดียวกัน และยังสามารถรับชมได้เร็วไม่ต้องเสียเวลา Load นานอีกด้วย ดังนั้นต้องศึกษาและทำความเข้าใจให้ดีเพื่อประโยชน์ในการออกแบบ