บทที่ 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) เปลี่ยนสีขอบ