เรื่อง การทำงานร่วมกับตาราง

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

1.1 แถว Rows คือ ช่องที่เรียงกันในแนวนอน
1.2 หลัก Columns คือ ช่องที่เรียงกันในแนวตั้ง
1.3 ช่อง Cell


2. การสร้างตารางในเว็บเพจ
ขั้นตอนการสร้างตารางมีดังนี้

2.1 คลิกที่ปุ่มรูปตาราง ดังรูป

หรือใช้เมนูคำสั่ง Insert > Table

2.2 จะมีหน้าต่าง Table ดังรูป

ประกอบด้วยลายละเอียดดังนี้
1. Rows จำนวนแถวของตาราง (แนวนอน)
2. Columns จำนวนหลักของตาราง (แนวตั้ง)
3. Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent (%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ
4. Border thickness ความหนาของเส้นขอบตาราง ถ้าไม่ต้องการให้มีเส้นขอบใส่เป็น 0
5. Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง
6. Cell spacing ระยะห่างระหว่างช่องตาราง
7. Header จัดหัวข้อของตาราง <th> ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 4 แบบ คือ

7.1 None คือไม่มี Header
7.2 Left ให้แถวหลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง
7.3 Top แถวบนสุดเป็นหัวข้อตาราง
7.4 Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อตาราง

8. Caption ใส่ชื่อตาราง
9. Align caption จัดตำแหน่งของชื่อตาราง
10. Summary บรรยายรายละเอียดของตาราง

3. คุณสมบัติของตาราง
เพื่อสร้างตารางที่ต้องการแล้ว เมื่อคลิกเลือกที่เส้นขอบของตารางจะเห็นว่า Property inspector หรือในกรณีที่ทำงานกับตาราง จะปรากฎเครื่องมือของตาราง ดังรูป

           

ซึ่งมีประกอบด้วยรายละเอียด ดังนี้
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 ประเภท คือ

11.ปุ่ม Clear ใช้ในการลบความกว้างและความสูงของตาราง
11.ปุ่ม Convert สลับหน่วยของความสูง, ความกว้างของตารางเป็น px หรือ %

12. Bg Color กำหนดสีพื้นหลังของตาราง คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี
13. Bg Image กำหนดภาพพื้นหลังของตาราง
14. Brdr color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี

4. การแยกและผสานเซลล์ ของตาราง
การเพิ่มจำนวนช่องให้มากขึ้น หรือลดจำนวนช่องให้น้อยลงในแถวหรือหลักของตารางสามารถคลิกปุ่มผสานและรวมเซลล์ได้ดังนี้

4.1 การผสาน Cells

4.1.1 เลือกช่องที่ต้องการผสาน โดยการคลิกเมาส์ระบายแถบสีลากผ่านช่องที่ต้องการให้ผสานกัน


4.1.2 คลิกที่สัญลักษณ์ทางซ้ายล่างดังรูป


4.2 การแยกช่องจากช่องเดิมที่มีอยู่ หรือต้องการเพิ่มจำนวนช่องตาราง

4.2.1 คลิกเลือกช่องที่ต้องการแยก


4.2.2 คลิกที่สัญลักษณ์ทางซ้ายมือดังรูป



4.2.3 จะปรากฎหน้าต่าง Split Cell ดังรูป



4.2.4. เลือกว่าต้องการแยกใน แถว หรือ หลัก และแยกเป็นกี่ช่อง

5. คุณสมบัติช่องในตาราง
เมื่อเลือกช่องในตาราง ไม่ว่าจะช่องเดียว หรือหลายช่องหรือขณะที่กำลังพิมพ์ข้อมูลลงในตาราง แต่ไม่ใช่ทั้งตาราง 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) เปลี่ยนสีขอบ

สามารถเปลี่ยนคุณสมบัติต่างๆ ได้ง่ายและรวดเร็ว พร้อมกันหลายช่องโดย เลือกระบายแถบสีช่องที่ต้องการเปลี่ยนคุณสมบัติ จากนั้นคลิกเลือกคำสั่งที่ต้องการ