ตารางเป็นสิ่งที่ช่วยให้การแสดงผลของหน้าเว็บเพจ มีความถูกต้องและสมบูรณ์ เนื่องจากจะบังคับตำแหน่งของวัตถุไม่ให้เคลื่อนย้ายเมื่อแสดงผลในความละเอียดของระบบวินโดวส์ที่เปลี่ยนแปลงไปจากการออกแบบ อีกทั้งยังสามารถเพิ่มเติมลูกเล่นให้กับโครงสร้างตารางเพื่อช่วยดึงดูดความสนใจได้อีกด้วย
การจัดเลเอาต์ด้วยตาราง เป็นวิธีการจัดรูปแบบเนื้อหาภายในเว็บเพจให้เป็นระเบียบ ไม่ว่าจะเป็นการจัดชิดซ้าย-ชิดขวา นอกจากนี้เรายังสามารถปรับแต่งเว็บเพจให้น่าสนใจขึ้นได้โดยการใส่สีพื้นให้ตาราง ใส่เส้นขอบรวมถึงการปรับแต่งคุณสมบัติให้ตารางสามารถยืด-หดตามขนาดจอภาพได้ด้วย
ก่อนที่จะนำรูปภาพ ข้อความ หรือวัตถุต่างๆมาใส่ลงในหน้าเว็บเพจ จะต้องมีการสร้างโครงสร้างของตารางขึ้นมาเสียก่อน โดยกำหนดจากจำนวนคอร์ลัมและแถวที่ต้องการในแต่ละครั้งให้พอดีหรือเหมาะสมกับสิ่งที่ต้องการจะจัดวาง
ภาพเปรียบเทียบแสดงให้เห็นว่า หากเราวางภาพและข้อความปกติเราจะได้เว็บเพจที่เรียงต่อกันลงมาด้านล่าง (ภาพซ้าย) แต่เมื่อนำตารางมาใช้ เราจะสามารถจัดวางเนื้อหาของเว็บเพจให้เป็นระเบียบและน่าสนใจยิ่งขึ้น (ภาพขวา)
ตาราง (Table) ประกอบด้วยคอลัมน์ (Column) แนวตั้ง และแถว (Row) แนวนอน จุดตัดที่เกิดจากคอลัมน์และแถว คือ เซลล์ (Cell) ซึ่งจะเป็นส่วนสำหรับใส่ข้อมูลไม่ว่าจะเป็นข้อความ ภาพกราฟิก หรือการเชื่อมโยงต่างๆ ส่วนประกอบของตารางแสดงดังภาพ
1. แถว (Row)
2. คอลัมน์ (Column)
3. เซลล์ (Cell)
4. เส้นขอบ (Border)
1. คลิกตำแหน่งที่ต้องการสร้างตาราง
2. ที่เมนู Insert คลิกคำสั่ง Table
3. จะปรากฏหน้าต่างของ Table โดยแบ่งออกเป็น 3 กลุ่ม ดังรูป
กลุ่มที่ 1 : Table size (กำหนดรายละเอียดของตาราง)
- Rows : จำนวนแถว
- Columns : จำนวนคอลัมน์
- Table width : ความกว้างของตาราง (หน่วยที่ใช้วัดเป็นเปอร์เซ็นต์หรือพิกเซล)
- Border thickness : ความหนาของเส้นขอบตาราง
- Cell padding : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา
- Cell spacing : ระยะห่างระหว่างเซลล์ในตาราง
กลุ่มที่ 2 : Header (เลือกตำแหน่งของหัวเรื่องภายในตาราง)
- None : ไม่ใช้หัวเรื่องในตาราง
- Left : กำหนดให้มีหัวเรื่องทางด้านซ้าย
- Top : กำหนดให้มีหัวเรื่องทางด้านบน
- Both : กำหนดให้มีหัวเรื่องด้านซ้ายและด้านบน
กลุ่มที่ 3 : Accessibility (กำหนดข้อมูลทั่วไปในตาราง)
- Caption : กำหนดหัวข้อของตาราง
- Summary : คำอธิบายกำกับตาราง
4. เมื่อกำหนดคุณสมบัติต่าง ๆ เสร็จเรียบร้อยแล้ว ได้ตารางตามที่เราต้องการ
1. Table : ชื่อของตาราง
2. Rows : จำนวนแถว
3. Cols : จำนวนคอลัมน์
4. w : ความกว้างของตาราง
5. Direction : เปลี่ยนทิศทางของตาราง
6. Cellpad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา
7. CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์
8. Align : การจัดตำแหน่งของตาราง
9. Border : ความหนาของเส้นขอบตาราง
10. Class : กำหนดค่า CSS ให้กับตาราง