หน่วยที่ 7 การสร้างตารางเพื่อใช้งานในเว็บไซต์

7.1 รู้จักกับตาราง

      ตาราง (Table) เป็นทั้งรูปแบบการแสดงข้อมูลและการจัดเรียงข้อมูล รูปแบบของตารางมีความหลากหลาย ทั้งทางด้านโครงสร้าง  โดยมีส่วนประกอบที่สำคัญของตาราง คือ “แถว” (หรือเรียกว่า สดมภ์) และ “คอลัมน์” ตารางมีส่วนช่วยในการจัดระเบียบข้อความและรูปภาพ สามารถเพิ่มเติมคุณสมบัติให้กับตารางได้ ไม่ว่าจะเป็น การใส่สี  ข้อความ รูปภาพ รูปภาพพื้นหลังให้กับตารางให้ตรงกับความต้องการของผู้พัฒนาเว็บไซต์ได้ โครงสร้าง ของตารางประกอบด้วยตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column)

                              

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

          1.คลิกที่เมนู Insert > Table หรือกดปุ่มคีย์ลัด Ctrl + Alt + T
            2.จะปรากฏกล่องข้อความ Table กำหนดคุณสมบัติของตารางตามต้องการ ดังนี้
            รายละเอียดของการกำหนดคุณสมบัติให้กับตารางสามารถกำหนดได้ ดังนี้
            Table size : กำหนดขนาดของตาราง สามารถกำหนดได้ดังนี้
            -Rows : กำหนดจำนวนแถวในตาราง
            -Columns :  กำหนดจำนวนคอลัมน์ในตาราง
            -Table width : กำหนดความกว้างของตาราง โดยมีหน่วยเป็น Pixels หรือ Percent
            -Border thickness : กำหนดความหนาของตาราง
            -Cell padding : กำหนดระยะห่างระหว่างขอบเซลกับข้อความภายในเซลล์
            -Cell spacing : กำหนดระยะห่างระหว่างเซลล์ทั้งแนวตั้งและแนวนอน          
            Header : กำหนดรูปแบบหัวข้อของเซลล์ในตาราง โดยสามารถกำหนดได้ 4 รูปแบบดังนี้
            -None : ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง
            -Left : กำหนดให้คอลัมน์แรกเป็นหัวข้อของตาราง
            -Top : กำหนดให้แถวบนสุดเป็นหัวข้อของตาราง
            -Both : กำหนดให้ทั้งแถวและคอลัมน์แรกเป็นหัวข้อของตาราง
            Accessibility : กำหนดการเข้าถึงข้อมูลในตาราง สามารถกำหนดได้ดังนี้
            -Caption : กำหนดข้อความเพื่อใช้เป็นหัวข้อของตาราง
            -Summary : เขียนคำอธิบายเกี่ยวกับตาราง แสดงให้เห็นบนหน้าเว็บ
            3.คลิกปุ่ม OK เพื่อสร้างตาราง

                              


          4.จะได้ตาราง

                         

            คำสั่งเกี่ยวกับตาราง ในมุมมอง Code

                              
            <table width =”800” border = ”0” >..</table> เป็นคำสั่งเริ่มต้นที่ใช้ในการสร้างตารางซึ่งเป็นการกำหนดจุดเริ่มต้นและสิ้นสุดของตาราง โดยกำหนดความกว่างทั้งหมดของตารางเท่ากับ 800 pixels กำหนดเส้นขอบตารางมีค่าเท่ากับ 0 หรือไม่ให้แสดงงเส้นขอบตาราง
Cellpadding = ”0” กำหนดระยะห่างระหว่างขอบเซลล์กับข้อความภายในเซลล์มีค่าเท่ากับ 0 กำหนด
Cellspacing = “0” ระยะห่างระหว่างแต่ละเซลล์ทั้งแนวตั้งและแนวนอนมีค่าเท่ากับ 0
Summarg = “ตารางรายละเอียดข้อมูล” กำหนดคำอธิบายให้กับตารางคือ ตารางรายละเอียดข้อมูล
<tr>..</tr> เป็นการกำหนดจุดเริ่มต้นของแถว (Row)
<td >..</td> เป้นคำสั่งในการกำหนดค่าเริ่มต้นของคอลลัมน์