บทที่ 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. รูปภาพจะแทรกในเซลล์นั้นทันที สามารถปรับแต่งได้ตามต้องการ