ประโยชน์ของการใช้ตาราง

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.จะได้ขนาดตารางใหม่ โดยที่ไม่มีตัวเลขในวงเล็บ