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

ตาราง (Table)
เมื่อก่อนคำสั่ง ตาราง (table) ถือว่าเป็นคำสั่งที่จำเป็น และสำคัญมากในการสร้างเว็บเพจ เพราะการจัดตำแหน่งของหน้า layout นั้นจำเป็นจะต้องใช้คำสั่งตารางทั้งหมด ทำให้มีเทคนิคมากมายที่นำมาใช้เกี่ยวกับตาราง แต่ด้วยข้อเสียของคำสั่งตาราง คือจะเปลี่ยนขนาดตัวเองตามวัตถุที่อยู่ภายใน ทำให้โครงสร้างของเว็บไซต์เปลี่ยนแปลงไป และยังยุ่งยากในการจัดรูปแบบหน้า
    ปัจจุบันนี้คำสั่ง CSS กำลังได้รับความนิยมในการจัดรูปแบบหน้า layout มากกว่า คำสั่งตารางมาก ทำให้คำสั่งตารางลดความสำคัญลงไป เนื่องจาก CSS นั้นจัดรูปแบบหน้าได้เร็วกว่า ง่ายกว่า และเปลี่ยนแปลงได้ง่ายกว่า ทำให้ในปัจจุบันนั้น คำสั่งตารางจะใช้เพียงแสดงข้อมูลในรูปแบบตารางเท่านั้น
ตารางนั้นจะประกอบด้วย 3 ส่วนหลักๆคือ
1.แถว rows คือ ช่องที่เรียงกันในแนวนอน
2.หลัก columns คือ ช่องที่เรียงกันในแนวตั้ง
                           3.ช่อง cell สำหรับเครื่องมือที่ใช้ในการสร้างตารางนั้นมีอันเดียว
    สำหรับการใช้คำสั่งตารางนั้นควรมีความรู้พื้นฐานเกี่ยวกับคำสั่ง HTML จะช่วยให้การใช้งานคำสั่งตารางใน Dreamweaver เป็นไปได้ราบรื่นยิ่งขึ้น

การสร้างตารางในเว็บเพจ
วิธีที่ 1 การเลือกที่เมนู Insert >> Table
            วิธีที่ 2 กดแป้นพิมพ์ที่คีย์ลัด <Ctrl> + <Alt> + T
                                            วิธีที่ 3 เลือกเครื่องมือตาราง  ที่แท็บ Common หรือ Layout บน Insert bar
ซึ่งเมื่อเข้าใช้งานทั้ง 3 วิธีข้างต้นจะได้หน้าต่างของตารางขึ้นมาให้กำหนดรายละเอียด ดังนี้
– Rows ใส่จำนวนแถวที่ต้องการ
– Column ใส่จำนวนคอมลัมน์ที่ต้องการ
– Table width กำหนดความกว้างของตารางที่ต้องการ มีหน่วยเป็น Pixel และ Percent
– Border thickness กำหนดความหนาของเส้นตาราง
– Cell padding กำหนดระยะห่างของข้อความภายในเซลล์กับขอบเซลล์
– Cell spacing กำหนดระยะห่างระหว่างเซลล์
– Heading กำหนดหัวข้อของข้อมูลในตารางและการจัดวาง
                  -> None ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง
                           -> Left กำหนดคอลัมน์แรกเป็นหัวข้อของข้อมูลในตาราง
                      -> Top กำหนดแถวแรกเป็นหัวข้อของข้อมูลในตาราง
                           -> Both กำหนดทั้งแถวและคอลัมน์แรกเป็นหัวข้อตาราง
-> Caption กำหนดหัวข้อของตาราง

– Summary เป็นการเขียนคำอธิบายเกี่ยวกับตาราง โดยจะถูกเขียนไว้ในคำสั่ง HTML และไม่แสดงออกบนหน้าเว็บเพจ เมื่อกำหนดค่าเรียบร้อยแล้วกดปุ่ม OK เพื่อยืนยัน

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

เราสามารถผสานช่อง marging cells โดยการ

1.เลือกช่องที่ต้องการผสาน โดยการคลิกเมาส์แล้วลากผ่านช่องที่ต้องการให้ผสานกัน

2.คลิกที่สัญลักษณ์ทางซ้ายล่างดังรูป  


การแยกช่องจากช่องเดิมที่มีอยู่ ในตัวอย่างเป็นการแยกจำนวนช่องในแถว (rows) ให้มาขึ้น 

เราสามารถแยกช่อง splitting cells โดยการ 

1.เลือกช่องที่ต้องการแยก

2.คลิกที่สัญลักษณ์ทางซ้ายมือดังรูป 


3.จะมีหน้าต่างขึ้นมาดังภาพ 


ให้เราเลือกว่าต้องการแยกใน แถว หรือ หลัก และแยกเป็นกี่ช่อง 

กำหนดคุณสมบัติช่องในตาราง
เมื่อเราเลือกช่องในตาราง ไม่ว่าจะช่องเดียว หรือหลายช่องแต่ไม่ใช่ทั้งตาราง Property inspector
1.ปุ่มผสานช่อง Merge Cells จะใช้งานได้เมื่อเลือกช่อง มากว่า 1 ช่อง
2.ปุ่มแยกช่อง Split Cell จะใช้งานได้เมื่อเราเลือกช่อง เพียงช่องเดียว
3.Horz ใช้จัดตำแหน่งของวัตถุในแนวราบ เช่น ชิดซ้าย , ชิดขวา , จัดเข้ากลาง
4.Vert ใช้จัดตำแหน่งของวัตถุในแนวตั้ง เช่น บน , ล่าง
5.W กำหนดความกว้างของช่อง
6.H กำหนดความสูงของช่อง
7.No Wrap ตามปรกติตัวอักษรจะขึ้นบรรทัดใหม่ ถ้ายาวเกินกว่าความยาวของตาราง แต่ถ้าเลือก no wrap จะไม่ขึ้นบรรทัดใหม่
8.Header ทำให้ช่องนั้นเป็นหัวข้อของตาราง แสดงตัวหนา <th>
9.Bg (Image) ใส่ภาพพื้นหลังช่อง
10.Bg (Color) ใส่สีพื้นหลังช่อง
11.Brdr (Color) เปลี่ยนสีขอบ