บทที่ 6 โครงสร้างและส่วนประกอบของตาราง
การสร้างตารางจะช่วยจัดหน้าเว็บเพจให้เป็นระเบียบเรียบร้อย รวมถึงการปรับแต่งค่าต่างๆ เช่น เส้นขอบของตาราง สีพื้นหลัง ข้อความในเซลล์ การรวมหรือแยกเซลล์ เพื่อใช้ในการแสดงข้อมูล ซึ่งตาราง ประกอบด้วย
1. คอลัมน์ (Column) หรือเซลล์ในแนวตั้ง
2. แถว (Row) หรือเซลล์ในแนวนอน
3. เซลล์ (Cell) หรือช่องของตาราง
การใส่ตารางลงในเว็บเพจ
การสร้างตารางมีหลายวิธี ซึ่งมีวิธีการดังนี้
วิธีที่ 1
วิธีที่ 2
1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการ
2. แท็บ Insert ให้เลือก Common
3. คลิกเลือก Table
4. จะปรากฏหน้าต่างของ 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 : คำอธิบายกำกับตาราง
5. เมื่อกำหนดคุณสมบัติต่าง ๆ เสร็จเรียบร้อยแล้ว ได้ตารางตามที่เราต้องการ
การปรับแต่งคุณสมบัติของตาราง
เมื่อเราคลิกเลือกที่ตาราง เราสามารถปรับแต่งรายละเอียดต่าง ๆ ของตารางในส่วนของ Properties Inspector ดังนี้
1. Table : ชื่อของตาราง
2. Rows : จำนวนแถว
3. Cols : จำนวนคอลัมน์
4. w : ความกว้างของตาราง
5. Direction : เปลี่ยนทิศทางของตาราง
6. Cellpad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา
7. CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์
8. Align : การจัดตำแหน่งของตาราง
9. Border : ความหนาของเส้นขอบตาราง
106. Class : กำหนดค่า CSS ให้กับตาราง
1. การเพิ่ม/ลบ (แถวหรือคอลัมน์)
เมื่อเราสร้างตารางเสร็จเรียบร้อยแล้วและต้องการที่จะเพิ่ม/ลบ (แถวหรือคอลัมน์) สามารถทำได้ตามขั้นตอน ดังนี้
1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่งของเซลล์ที่ต้องการ
2. คลิกเมาส์ปุ่มขวา จะปรากฏเมนูย่อย ให้เลือก Table
3. จะปรากฏรายการให้เลือก ดังนี้
- Insert Row : แทรกแถว
- Insert Column : แทรกคอลัมน์
- Insert Rows or Columns : แทรกแถวหรือแทรกคอลัมน์
- Delete Row : ลบแถว
- Delete Column : ลบคอลัมน์
2. การรวมเซลล์ / การแบ่งเซลล์
หากเราต้องการรวมเซลล์หลายๆ เซลล์เข้าด้วยกัน หรือต้องการแบ่งเซลล์ มีวิธีการดังนี้
1. เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน)
2. คลิกเมาส์ปุ่มขวา จะปรากฎเมนูย่อย ให้เลือก Table
3. จะปรากฏรายการให้เลือก ดังนี้
- Merge Cells : แทรกเซลล์
- Split Cell : แบ่งเซลล์
4. เซลล์ที่ถูกเลือกจะรวมเซลล์เข้าด้วยกัน ดังรูป
หมายเหตุ กรณีแบ่งเซลล์
เมื่อคลิกที่ Split Cell จะปรากฏหน้าต่าง Split Cell ดังรูป
Rows : เลือกแบ่งเซลล์ออกเป็นแถว
Columns : เลือกแบ่งเซลล์ออกเป็นคอลัมน์
Number of ... : กำหนดจำนวนเซลล์ที่ต้องการจะแบ่ง
การแทรกข้อความและรูปภาพลงในตาราง
1. คลิกเซลล์ที่ต้องการจะแทรกข้อความ แล้วพิมพ์ข้อความลงไปเหมือนโปรแกรม Microsoft Excel
2. คลิกเซลล์ที่ต้องการจะแทรกรูปภาพ
3. คลิกที่เมนู Insert
4. เลือก Image หรือ กดปุ่ม Ctrl + Alt + I จะปรากฏหน้าต่าง Select Image Source
5. คลิกที่ช่อง Look in เพื่อเลือกโฟลเดอร์ที่เก็บรูปภาพ
6. คลิกเลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ
7. คลิกปุ่ม OK
8. รูปภาพจะแทรกในเซลล์นั้นทันที สามารถปรับแต่งได้ตามต้องการ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น