การปรับแต่งรายละเอียดของตาราง

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

1 Table : ชื่อของตาราง

2 Rows : จำนวนแถว

3 Cols : จำนวนคอลัมน์

4 W : ความกว้างของตาราง

5 CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์

6 CellPad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา

7 Border : ความหนาของเส้นขอบตาราง

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

9 Class : กำหนดค่า CSS ให้กับตาราง

ปรับความกว้างของตารางใน Properties Inspector

ใน Properties Inspector มีคำสั่งที่ใช้กำหนดความกว้างของทั้งตาราง หรือเซลล์ใด ๆ ในตาราง โดยสามารถระบุค่าที่เจาะจงสำหรับการปรับขนาดของตารางได้ดังนี้

ปรับความกว้างของทั้งตาราง

เราสามารถปรับขนาดความกว้างของทั้งตารางได้ โดยคลิกเลือกทั้งตาราง จากนั้นกำหนดขนาด ความกว้างในช่อง (กำหนดเป็นเปอร์เซ็นต์เทียบกับความกว้างของหน้าเว็บ หรือระบุเป็นพิกเซลด้วยขนาดที่เฉพาะเจาะจงก็ได้) ตัวอย่างกำหนดความว้างของตารางเป็น 100% ซึ่ง ขนาดของตารางจะถูกขยายตามขนาดของหน้าเว็บที่เราเปิดอยู่ มีขั้นตอนดังนี้

1 คลิกเลือกทั้งตาราง

2 กำหนดความกว้างของตารางเป็น 100%

3 ตารางที่มีขนาดความกว้างเป็น 100% จะถูกขยายตามความกว้างของหน้าเว็บของเราด้วย

ปรับความสูงและความกว้างของช่องเซลล์

ขนาดความกว้างของช่องตารางนั้นถูกกำหนดโดยขนาดข้อมูลในแต่ละช่อง ทำให้บางกรณีอาจทำให้ ตารางดูไม่เหมาะสม ซึ่งเราสามารถกำหนดความกว้างของช่องตารางได้อย่างเจาะจง โดยคลิกที่ช่องตารางที่ต้องการปรับขนาด แล้วกำหนดขนาดความกว้างในช่อง กำหนดความสูง ในช่อง ตัวอย่างกำหนดความว้างของช่องตาราง 200 พิกเซล และความสูงของช่องตารางเป็น 50 พิกเซล มีขั้นตอนดังนี้

1 คลิกเมาส์ในช่องตารางที่ต้องการกำหนดขนาด

2 กำหนดความกว้างและความสูงของช่องตาราง

3 ช่องตารางมีความกว้าง 200 พิกเซล สูง 50 พิเซล

Note การกำหนดความกว้างและความสูงให้กับช่องเซลล์ในตาราง ถ้ากำหนดเป็น เปอร์เซ็นต์จะต้องใส่เครื่องหมาย % ต่อท้ายด้วย แต่ถ้ากำหนดเป็นพิกเซลไม่ต้องใส่เครื่องหมายใด ๆ ซึ่งต่างจากการกำหนดขนาดความกวา้งและความสูงของตารางที่ให้เลือกหน่วยที่ใช้ เป็น % หรือ Pixel

การจัดเรียงข้อความในตาราง

ต่อไปเราจะจัดเรียงข้อความภายในตารางทั้งแนวนอนและแนวตั้ง เพื่อความสวยงามและเป็นระเบียบ

จัดข้อมูลในแนวนอน

เราสามารถจัดข้อมูลที่แสดงในช่องตารางให้ชิดขวา ชิดซ้าย หรืออยู่กึ่งกลางของช่องตาราง โดย คลิกช่องตารางที่ต้องการจัดข้อมูล แล้วกำหนดตำแหน่งของข้อมูลในช่อง Horz จาก Properties Inspector

1 คลิกช่องตารางที่ต้องจัดตำแหน่งข้อความ

2 กำหนดตำแหน่งของข้อมูลในช่อง Horz จาก Properties Inspector

2.1 คลิกเลือก เพื่อจัดเรียงข้อมูลแบบปกติ

2.2 คลิกเลือก เพื่อจัดเรียงข้อมูลอยู่ชิดซ้ายของช่องตาราง

2.3 คลิกเลือก เพื่อจัดเรียงข้อมูลอยู่กึ่งกลางของช่องตาราง

2.4 คลิกเลือก เพื่อจัดเรียงข้อมูลอยู่ชิดขวาของช่องตาราง

จัดข้อมูลในแนวตั้ง

เราสามารถจัดข้อมูลที่แสดงในช่องตารางให้ชิดบน ชิดล่าง หรืออยู่กึ่งกลางของช่องตาราง โดย คลิกช่องตารางที่ต้องการจัดข้อมูล แล้วกำหนดตำแหน่งของข้อมูลในช่อง Vert จาก Properties Inspector

1 คลิกช่องตารางที่ต้องจัดตำแหน่งข้อความ

2 กำหนดตำแหน่งของข้อมูลในช่อง Vert จาก Properties Inspector

2.1 คลิกเลือก เพื่อจัดเรียงข้อมูลแบบปกติ (คือจัดให้อยู่กึ่งกลางของช่องตาราง)

2.2 คลิกเลือก เพื่อจัดให้ข้อมูลอยู่บนสุดของช่องตาราง

2.3 คลิกเลือก เพื่อจัดให้ข้อมูลอยู่กึ่งกลางของช่องตาราง

2.4 คลิกเลือก เพื่อจัดให้ข้อมูลอยู่ล่างสุดของช่องตาราง

การแทรกแถวและคอลัมน์          หลังจากที่เราได้สร้างตารางขึ้นมาแล้ว ก็สามารถแทรกแถวและคอลัมน์เพิ่มภายในตารางได้ ดังนี้ การแทรกแถว           1 คลิกเมาส์วางเคอเซอร์ตำแหน่งที่ต้องการจะแทรกแถว (ซึ่งโปรแกรมจะแทรกแถวด้านบนตำแหน่งของแถวที่เลือก)           2 เลือกเมนู Modify -> Table -> Insert Row หรือคลิกเมาส์ปุ่มขวาในเซลล์ที่ต้องการแทรกแล้วเลือกเมนู Table -> Insert Row หรือกดคีย์ <Ctrl>+<M>           3 จะปรากฏแถวขึ้นมา 1 แถว ซึ่งมีจำนวนของเซลล์เท่ากับแถวเดิมที่เราวางเคอร์เซอร์ Tip วิธีลัดในการเพิ่มแถว โดยการคลิกเมาส์ที่เซลลืสุดท้ายของตาราง แล้วกดปุ่ม <Tab> ที่คีย์บอร์ด จะเป็นการเพิ่มแถวทัดไปอีก 1 แถว ที่ด้านล่างของตาราง การแทรกคอลัมน์           1 คลิกเมาส์วางเคอเซอร์ตรงตำแหน่งของเซลล์ที่ต้องการจะแทรกคอลัมน์ (ซึ่งโปรแกรมจะแทรกคอลัมน์ทางซ้ายมือของคอลัมน์ที่คลิกเมาส์วางเคอร์เซอร์)           2 เลือกเมนู Modify -> Table -> Insert Column หรือคลิกเมาส์ปุ่มขวาในเซลล์ที่ต้องการแทรกแล้วเลือกเมนู Table -> Insert Column หรือกดคีย์ <Ctrl>+<Shift> +<A>           3 จะปรากฏคอลัมน์ขึ้นมา 1 คอลัมน์ ซึ่งมีจำนวนของเซลล์เท่ากับคอลัมน์เดิมที่เราวางเคอร์เซอร์ การแทรกหลายแถว/คอลัมน์           ในกรณีที่เราต้องการแทรกหลายแถว/คอลัมน์พร้อมกัน ให้คลิกเมาส์วางเคอร์เซอร์เซลล์ที่ต้องการ แล้วเลือกคำสั่ง Modify -> Table -> Insert Rows or Columns... หรือคลิกเมาส์ขวาเซลล์ที่ต้องการ แล้วเลือกคำสั่ง Table -> Insert Rows or Columns... จะสามารถแทรกหลายแถว/ คอลัมน์พร้อมกัน ไม่เสียเวลาแทรกทีละแถว/คอลัมน์ ดังนี้           1 คลิกเมาส์วางเคอเซอร์ตรงตำแหน่งของเซลล์ที่ต้องการจะแทรกหลายแถว/คอลัมน์           2 เลือกเมนู Modify -> Table -> Rows or Columns... หรือคลิกเมาส์ปุ่มขวาในเซลล์ที่ต้องการแทรกแล้วเลือกเมนู Table -> Rows or Columns... จะปรากฏหน้าต่าง Insert Rows or Columns ให้เลือกการแทรกแถวและคอลัมน์ ดังรายละเอียดต่อไปนี้           3 เลือกว่าจะแทรกแถวหรือคอลัมน์                  Insert Rows/Columns กำหนดว่าจะแทรกแถวหรือคอลัมน์                  Number of Rows/Columns ระบุจำนวนแถวหรือคอลัมน์ที่จะแทรก           4 เลือกว่าจะแทรกก่อน/หลังเซลล์ที่เลือก                  Where : Before current Rows/Columns แทรกก่อนแถวหรือคอลัมน์ปัจจุบัน                  Where : After current Rows/Columns แทรกหลังแถวหรือคอลัมน์ปัจจุบัน           5 คลิกปุ่ม OK เพื่อแทรกแถว/คอลัมน์           6 แสดงการแทรกคอลัมน์ 3 คอลัมน์เพิ่มเข้ามา

การลบแถวและคอลัมน์          เราลบแถวหรือคอลัมน์ของตารางที่ไม่ต้องการใช้งานออกไปได้ โดยเลือกแถวหรือคอลัมน์นั้น ๆ แล้วกดปุ่ม <Delete> การลบแถว           1 เลือกแถวที่ต้องการลบแล้วกดปุ่ม <Delete> ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวาเลือกเซลล์ใดก็ได้ในแถวที่ต้องการลบแล้วเลือก Table -> Delete Row หรือเลือกคำสั่ง Modify -> Table -> Delete Row หรือกดคีย์ลัด <Ctrl>+<Shift>+<M>           2 แถวที่เลือกไว้จะหายไป การลบคอลัมน์           1 เลือกคอลัมน์ที่ต้องการลบแล้วกดปุ่ม <Delete> ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวาเลือกเซลล์ใดก็ได้ในคอลัมน์ที่ต้องการลบแล้วเลือก Table -> Delete Column หรือเลือกคำสั่ง Modify -> Table -> Delete Column หรือกดคีย์ลัด <Ctrl>+<Shift>+<->           2 คอลัมน์ที่เลือกไว้จะหายไป

การรวมและการแบ่งเซลล์          เพื่อจัดเรียงข้อมูลอย่างเหมาะสม เราสามารถกำหนดให้รวม หรือแบ่งเซลล์ในตารางได้ การรวมเซลล์          เป็นการรวมเซลล์หลายๆ เซลล์เข้าด้วยกัน           1 เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน) โดยกดคีย <Ctrl> ค้างไว้พร้อมกับเลือกเซลล์           2 คลิกเมาส์ที่ปุ่ม จาก Properties Inspector หรือคลิกเมาส์ปุ่มขวาเลือกคำสั่ง Table -> Merge Cells หรือเลือกคำสั่ง Modify -> Table -> Merge Cells หรือกดคีย์ลัด <Ctrl>+<Altl>+M           3 แสดงผลลัพธ์การรวมเซลล์ทั้ง 3 เซลล์ที่เราเลือกเป็นเซลล์เดียว ดังรูป การแบ่งเซลล์          ในกรณีที่เราต้องการแบ่งเซลล์ในตารางเป็นเซลล์ย่อย ก็สามารถทำได้เช่นกัน ดังนี้           1 คลิกเมาส์เลือกเซลล์ที่ต้องการแบ่ง           2 คลิกเมาส์ที่ปุ่ม จาก Properties Inspector หรือคลิกเมาส์ปุ่มขวาเลือกคำสั่ง Table -> Split Cell หรือเลือกคำสั่ง Modify -> Table -> Split Cell หรือกดคีย์ลัด <Ctrl>+<Altl>+S           3 จะปรากฏหน้าต่าง Split Cell ขึ้นมาให้เลือกรูปแบบของการแบ่งเซลล์ ดังนี้                 Split Cell Into Rows/Columns : กำหนดการแบ่งเซลล์ตามแนวแถวหรือคอลัมน์                 Number of Rows/Columns : กำหนดจำนวนเซลล์ที่จะแบ่งในแถวหรือคอลัมน์                  จากนั้นคลิกปุ่ม OK เพื่อตกลง           4 จะปรากฏเซลล์ใหม่ที่แบ่งออกมาจากเซลล์เดิมตามต้องการ