ประโยชน์ของการใช้ตาราง
1.ทำให้ประหยัดพื้นที่
2.ทำให้เว็บเพจมีความสวยงาม
ตัวอย่างการออกแบบเว็บเพจแบบปกติ
ประโยชน์ของการใช้ตาราง
1.ทำให้ประหยัดพื้นที่
2.ทำให้เว็บเพจมีความสวยงาม
ตัวอย่างการออกแบบเว็บเพจแบบปกติ
ตัวอย่างการออกแบบเว็บเพจแบบใช้ตาราง
รูปแบบและประเภทของตาราง
หรับตารางที่สร้างขึ้น สามารถกำหนดคุณลักษณะได้ 3 แบบ ซึ่งมีข้อดี-ข้อเสีย และความเหมาะสมในการใช้งานแตกต่างกันไป ดังนี้ แบบกำหนดขนาดตายตัว
ตารางแบบกำหนดตายตัว เหมาะกับการออกแบบเว็บเพจที่ต้องการแสดงเนื้อหาให้มีตำแหน่งตามที่กำหนดไว้ ไม่เคลื่อนที่หรือเปลี่ยนตำแหน่งเมื่อแสดงผลบนเบราว์เซอร์ หรือเมื่อยืด-ขยายหน้าจอ โดยการสร้างตารางชนิดนี้จะต้องกำหนดค่าโดยมีหน่วยเป็นพิกเซล (px)
แบบขยายขนาดอิสระ
ตารางแบบขยายขนาดอิสระ เหมาะกับการออกแบบเว็บเพจที่มีข้อความมาก ๆ และยืดหยุ่นกับตำแหน่ง และเลย์เอาท์ของเนื้อหาได้ โดยตารางจะสามารถยืดหรือย่อได้ตามขนาดของเบราว์เซอร์ โดยทำให้เนื้อหามีตำแหน่งไม่คงที่ โดยการสร้างตารางชนิดนี้ต้องกำหนดค่าโดยมีหน่วยเป็นเปอร์เซ็นต์ (%)
แบบตารางซ้อนตาราง
ตารางแบบซ้อนตารางเป็นเทคนิคหนึ่งที่ใช้ในการจัดเลย์เอาท์ของเว็บเพจ เนื่องจากสามารถแยก และจัดระเบียบให้เนื้อหาแต่ละส่วนได้อย่างอิสระ รวมถึงสามารถตกแต่งรูปแบบให้สวยงามได้อีกด้วย โดยจะใช้ข้อดีของตารางแบบกำหนดขนาดตายตัวกับแบบขยายขนาดอิสระมาใช้ร่วมกันได้
การแทรกตารางลงในเว็บเพจ
1.คลิกพาเนล Insert แล้วเลือก Common จากนั้นเลือกเครื่องมือ Table
2.กำหนดค่าต่าง ๆ ดังนี้ จากนั้นคลิก OK
2.1 Rows หรือแถว คือ จำนวนแถวแนวนอน ไล่จากบน-ล่าง
2.2 Columns หรือคอลัมน์ คือ จำนวนแถวในแนวตั้ง ไล่จากซ้าย-ขวา
2.3 Table Width กำหนดความกว้างของตาราง
2.4 Border thickness กำหนดความหนาของเส้นขอบตาราง
2.5 Cell padding กำหนดระยะห่างระหว่างขอบเซลล์กับเนื้อหาในเซลล์
2.6 Cell spacing กำหนดระยะห่างระหว่างเซลล์
2.7 Header กำหนดให้แถวหรือคอลัมน์ของตารางเป็นหัวเรื่อง โดยอาจเป็นแถวบน หรือคอลัมน์ซ้ายหรือทั้งสองแบบ
การแก้ไขตารางบนพาเนล Properties
หลังจากที่แทรกตารางลงในเว็บเพจแล้ว สามารถปรับแต่งตารางได้ โดยที่ค่าการปรับแต่งสามารถทำได้บนพาเนล Properties โดยทำการเลือกที่ Tag <table>
การแก้ไขตารางสามารถทำได้ทั้งปรับแต่งโดยรวมทั้งตาราง หรือปรับเฉพาะช่องหรือเซลล์ (cell)ทั้งในแบบคอลัมน์ (Column) หรือแถวแนวตั้ง และแถว (Rows) หรือแถวแนวนอน
โดยมีรูปแบบการปรับแต่ง ดังนี้
การปรับแต่งความกว้างของตาราง
1.เมื่อคลิกที่ตาราง จะพบขนาดที่กำหนด และขนาดจริงที่ใส่เนื้อหาไปแล้ว (ตัวเลขในวงเล็บ) เช่น 273(303) เป็นต้น
2.กำหนดขนาดความกว้างตาราง (W) บนพาเนล Properties ใน tag <table> ให้มีขนาดใหญ่กว่าขนาดในตัวเลขดังกล่าว จากนั้นกด Enter
3.จะได้ขนาดตารางใหม่ โดยที่ไม่มีตัวเลขในวงเล็บ