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

โครงสร้างและส่วนประกอบของตาราง

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

            1. คอลัมน์ (Column) หรือเซลล์ในแนวตั้ง

            2. แถว (Row) หรือเซลล์ในแนวนอน

            3. เซลล์ (Cell) หรือช่องของตาราง

 การใส่ตารางลงในเว็บเพจ

        การสร้างตารางมีหลายวิธี ซึ่งมีวิธีการดังนี้

          วิธีที่ 1

          วิธีที่ 2

            1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ

            2. แท็บ Insert ให้เลือก Common

            3. คลิกเลือก Table

            4. จะปรากฏหน้าต่างของ Table โดยแบ่งออกเป็น 3 กลุ่ม ดังรูป

                 กลุ่มที่ 1 : Table size (กำหนดรายละเอียดของตาราง)

                   - Rows : จำนวนแถว

                   - Columns : จำนวนคอลัมน์

                   - Table width : ความกว้างของตาราง (หน่วยที่ใช้วัดเป็นเปอร์เซ็นต์หรือพิกเซล)

                   - Border thickness : ความหนาของเส้นขอบตาราง

                   - Cell padding : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา

                   - Cell spacing : ระยะห่างระหว่างเซลล์ในตาราง

                 กลุ่มที่ 2 : Header (เลือกตำแหน่งของหัวเรื่องภายในตาราง)

                   - None : ไม่ใช้หัวเรื่องในตาราง

                   - Left : กำหนดให้มีหัวเรื่องทางด้านซ้าย

                   - Top : กำหนดให้มีหัวเรื่องทางด้านบน

                   - Both : กำหนดให้มีหัวเรื่องด้านซ้ายและด้านบน

                 กลุ่มที่ 3 : Accessibility (กำหนดข้อมูลทั่วไปในตาราง)

                   - Caption : กำหนดหัวข้อของตาราง

                   - Summary : คำอธิบายกำกับตาราง

            5. เมื่อกำหนดคุณสมบัติต่าง ๆ เสร็จเรียบร้อยแล้ว ได้ตารางตามที่เราต้องการ

 การปรับแต่งคุณสมบัติของตาราง

        เมื่อเราคลิกเลือกที่ตาราง เราสามารถปรับแต่งรายละเอียดต่าง ๆ ของตารางในส่วนของ Properties Inspector ดังนี้

              1. Table : ชื่อของตาราง

              2. Rows : จำนวนแถว

              3. Cols : จำนวนคอลัมน์

              4. w : ความกว้างของตาราง

              5. Direction : เปลี่ยนทิศทางของตาราง

              6. Cellpad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา

              7. CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์

              8. Align : การจัดตำแหน่งของตาราง

              9. Border : ความหนาของเส้นขอบตาราง

              106. Class : กำหนดค่า CSS ให้กับตาราง

         1. การเพิ่ม/ลบ (แถวหรือคอลัมน์)

            เมื่อเราสร้างตารางเสร็จเรียบร้อยแล้วและต้องการที่จะเพิ่ม/ลบ (แถวหรือคอลัมน์) สามารถทำได้ตามขั้นตอน ดังนี้

            1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่งของเซลล์ที่ต้องการ

            2. คลิกเมาส์ปุ่มขวา จะปรากฏเมนูย่อย ให้เลือก Table

            3. จะปรากฏรายการให้เลือก ดังนี้

                - Insert Row : แทรกแถว

                - Insert Column : แทรกคอลัมน์

                - Insert Rows or  Columns : แทรกแถวหรือแทรกคอลัมน์

                - Delete Row : ลบแถว

                - Delete Column : ลบคอลัมน์

         2. การรวมเซลล์ / การแบ่งเซลล์

            หากเราต้องการรวมเซลล์หลายๆ เซลล์เข้าด้วยกัน หรือต้องการแบ่งเซลล์ มีวิธีการดังนี้

            1. เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน) 

            2. คลิกเมาส์ปุ่มขวา จะปรากฎเมนูย่อย ให้เลือก Table

            3. จะปรากฏรายการให้เลือก ดังนี้

                - Merge Cells : แทรกเซลล์

                - Split Cell : แบ่งเซลล์

            4. เซลล์ที่ถูกเลือกจะรวมเซลล์เข้าด้วยกัน ดังรูป

             หมายเหตุ กรณีแบ่งเซลล์

               เมื่อคลิกที่ Split Cell จะปรากฏหน้าต่าง Split Cell ดังรูป

                 Rows : เลือกแบ่งเซลล์ออกเป็นแถว

                 Columns : เลือกแบ่งเซลล์ออกเป็นคอลัมน์

                 Number of ... : กำหนดจำนวนเซลล์ที่ต้องการจะแบ่ง

 การแทรกข้อความและรูปภาพลงในตาราง

            1. คลิกเซลล์ที่ต้องการจะแทรกข้อความ แล้วพิมพ์ข้อความลงไปเหมือนโปรแกรม Microsoft Excel

            2. คลิกเซลล์ที่ต้องการจะแทรกรูปภาพ

            3. คลิกที่เมนู Insert

            4. เลือก Image หรือ กดปุ่ม Ctrl + Alt + I จะปรากฏหน้าต่าง Select Image Source

            5. คลิกที่ช่อง Look in เพื่อเลือกโฟลเดอร์ที่เก็บรูปภาพ

            6. คลิกเลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ

            7. คลิกปุ่ม OK

            8. รูปภาพจะแทรกในเซลล์นั้นทันที สามารถปรับแต่งได้ตามต้องการ