หน่วยการเรียนรู้ที่ 4
การจัดตารางบนหน้าเว็บเพจ

การสร้างตาราง(Table) ในโปรแกรม Adobe Dreamweaver CS3 สามารถใช้ในการจัดรูปแบบของหน้าเว็บเพจ เพื่อช่วยให้ตำแหน่งข้อมูลตรงตามที่ต้องการ สามารถใช้ตารางในการกำหนดขอบเขตของเนื้อหา แบ่งแยกย่อยเนื้อหาส่วนต่างๆ ให้มีความสวยงามและเหมาะสมกับหน้าเว็บเพจ และสามารถใช้ในการจัดข้อมูลให้เป็นระเบียบ

1. ตาราง(Table) มีประโยชน์สำคัญคือ ใช้ในการจัดรูปแบบของหน้าเว็บเพจ เพื่อช่วยให้ตำแหน่งข้อมูลตรงตามที่ต้องการ

2. รู้จักโครงสร้างของตาราง ตารางนั้นจะประกอบด้วย 3 ส่วนหลักๆคือ

1) Rows(แถว) คือ ช่องที่เรียงกันในแนวนอน

2) Columns(คอลัมน์)คือ ช่องที่เรียงกันในแนวตั้ง

3) Cell(ช่อง) คือ ช่องย่อยในตาราง

3. เริ่มสร้างตาราง

4. รายละเอียดของหน้าต่างการสร้างตาราง

1) Rows จำนวนแถวของตาราง

2) Columns จำนวนหลักของตาราง

3) Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent(%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ ก็ได้

4) Border thickness ความหนาของเส้นขอบตาราง ถ้าเราไม่ต้องการให้มีเส้นขอบให้ใส่เป็น 0

5) Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง

6) Cell spacing ระยะห่างระหว่างช่อง

7) Header จัดหัวข้อของตาราง <th> ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 3 แบบ คือ

left ให้หลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง

top แถวบนสุดเป็นหัวข้อ

Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อ

8) Caption ใส่ชื่อตาราง

9) Align caption จัดตำแหน่งของชื่อตาราง

10) Summary บรรยายตาราง

รายละเอียดที่เราจะเป็นต้องกรอกจะอยู่ในหัวข้อ Table size หรือรายการ 1-6 เท่านั้นนอกจากนั้นไม่จำเป็นต้องกรอกก็ได้

5. การกำหนดคุณสมบัติเพิ่มเติมให้ตาราง

1) Table Id กำหนดชื่ออ้างอิงให้กับตาราง

2) Rows กำหนดจำนวนแถวของตาราง ถ้าคุณเปลี่ยนจำนวนแถวให้น้อยลง โปรแกรมจะลบจากแถวล่างสุด

3) Cols กำหนดจำนวนหลักของตาราง ถ้าคุณเปลี่ยนจำนวนหลักให้น้อยลง โปรแกรมจะลบจากหลักขวาสุด

4) W (Width) กำหนดความกว้างของตาราง

5) H (Height) กำหนดความสูงของตาราง ไม่แนะนำให้กรอกค่านี้ เพราะคำสั่งนี้ยังไม่สนับสนุน XHTML 1.0.

6) CellPad ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง

7) CellSpace ระยะห่างระหว่างช่อง

8) Align จัดตำแหน่งของตาราง

9) Border กำหนดความหนาของขอบ

10) Class กำหนด class ใน css

11) Clear and Convert ปุ่มทางล่างซ้ายจะมีอยู่ 2 ประเภท คือ

- ปุ่ม clear ใช้ในการลบความกว้างและความสูงของตาราง

- ปุ่ม convert สลับหน่วยของความสูง,ความกว้างของตาราง เป็น px หรือ %

12) Bg Color กำหนดสีพื้นหลังของตาราง คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี

13) Bg Image กำหนดภาพพื้นหลังของตาราง

14) Brdr Color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือก

6. การใช้ตารางช่วยจัดรูปแบบเว็บเพจ นักเรียนสามารถใช้ตารางในการกำหนดขอบเขตของเนื้อหา และแบ่งแยกย่อยเนื้อหาส่วนต่างๆ ให้มีความสวยงามและเหมาะสมกับหน้าเว็บเพจ