M5 การใช้งาน Editor สำหรับปรับแต่งเว็บไซต์ > 33 คำสั่งสำหรับแทรกและแก้ไขตาราง

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

๏ การแทรก ตรารางในเอกสาร คลิก แล้วใส่คุณสมบัติต่าง ๆ ของตาราง เช่น แถว สดมน์ ความกว้าง ความสูง จากนั้นคลิก (ไม่ว่าจะกำหนดคุณสมบัติตารางอย่างไร แนะนำให้ ใส่ระยะแนวตั้งเท่ากับระยะแนวนอนเท่ากับ 0 เพื่อให้เนื้อหาและรูปภาพ

ในตารางไม่ชิดกันเกินไป) ตัวอย่างจะใส่ แถว 1 แถว สดมน์ 2 ความกว้าเท่ากับ 400 ตกลง ตามรูป

รูป 5.33-1

๏ ตารางที่ได้ ตามรูป

รูป 5.33-2

๏ สามารถกำหนดรูปแบบการแสดงผล ของตาราง ได้ โดย >คลิกขวา >คุณสมบัติตาราง>การจัดตำแหน่ง

(เลือกได้ 3 แบบ ชิดซ้าย/กึ่งกลาง/ชิดขวา) ตามตัวอย่าง เลือกให้ กึ่งกลาง ตามรูป

รูป 5.33-3

๏ ถ้าสร้างตารางมาแล้ว จำนวนแถวไม่พอ ต้องการเพิ่มแถว เช่นตัวอย่าง ต้องการ เพิ่ม 1 แถว ตารางที่ได้ ให้ทำการ

คลิกขวาที่ตาราง >จะแสดงแถบเมนูตามรูป > ไปที่เมนูแถว > แทรกแถว สามารถแทรกได้เท่าไหร่ก็ได้ตามที่ต้องการ ตามรูป

รูป 5.33-4

รูป 5.33-5

๏ ถ้าต้องการลบแถว คลิกขวาที่ตารางตรงแถวที่ต้องการลบ > แถว > ลบแถว

รูป 5.33-6

๏ ถ้าสร้างตารางมาแล้ว จำนวนช่องไม่พอ ต้องการเพิ่มช่อง เช่นตัวอย่าง ต้องการ เพิ่ม 1 แถว ตารางที่ได้ ให้ทำการ

คลิกขวาที่ตาราง >จะแสดงแถบเมนูตามรูป > ไปที่เมนูช่อง > แทรกช่อง สามารถแทรกได้เท่าไหร่ก็ได้ตามที่ต้องการ ตามรูป

รูป 5.33-7

๏ ได้ช่องตารางเพิ่มตามที่ต้องการ ตามรูป

รูป 5.33-8

๏ ถ้าต้องการลบช่องตาราง คลิกขวาที่ตารางตรงช่องที่ต้องการลบ> ช่องตาราง > ลบช่อง

รูป 5.33-9

๏ ถ้าต้องการผสานช่องตารางที่มีเข้าด้วยกัน ให้พิมพ์เนื้อหาเข้าไปที่แต่ละช่องก่อน (ตัวอย่าง พิมพ์เลข 1 ไปแต่ละช่อง )

> ใช้เมาส์ลากทับตัวอักษร ในช่องตารางที่ต้องการผสาน ตามรูป > คลิกขวา ขณะที่เมาส์ยังลากทับอยู่ >ช่องตาราง >ผสานช่อง ตามรูป

รูป 5.33-10

๏ ได้ช่องตารางที่ผสานเรียบร้อย ตามที่ต้องการ แล้วจึงทำการลบเนื้อหาออก ตามรูป

รูป 5.33-11

๏ ถ้าต้องการแยกช่องตาราง คลิกขวาที่ตารางตรงช่องที่ต้องการลบ > ช่องตาราง > แยกช่อง ตามรูป

รูป 5.33-12

เพิ่มเติม

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

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

รูป 5.33-13

๏ ถ้าต้องการกำหนดรูปแบบการจัดวางแนวนอน (ชิดซ้าย /ชิดขวา/กึ่งกลาง)ของเนื้อหาในช่องตาราง คลิกขวาที่ตารางตรงช่องที่ต้องการกำหนด > ช่องตาราง > คุณสมบัติช่อง จะเจอหน้าจอ ตามรูป

สามารถ เลือกคำสั่งให้เนื้อหาในช่องตารางนั้นๆ รูปแบบการแสดงผล เมื่อเลือกให้ชิดซ้าย เลือกให้ชิดขวา เลือกให้อยู่กึ่งกลาง

รูป 5.33-14

๏ ถ้าต้องการกำหนดรูปแบบการจัดวางแนวตั้งของเนื้อหาในช่องตาราง(บนสุด/กึ่งกลาง/ล่างสุด/อิงบรรทัด) คลิกขวาที่ตารางตรงช่องที่ต้องการกำหนด > ช่องตาราง > คุณสมบัติช่อง จะเจอหน้าจอ ตามรูป

รูป 5.33-15

๏ ถ้าต้องการใส่สีที่ช่อง ตาราง สามารถใส่ได้ โดยใช้ คุณสมบัติช่อง โดยเลือกใส่ได้ 2 แบบ สีพื้นหลังช่องตาราง และสีเส้นขอบ ลักษณะการใช้คำสั่งเหมือนกัน ตามตัวอย่างจะใส่สีพิ้นหลัง ที่ช่องตาราง วิธีการคือ คลิกขวาที่ตารางที่ต้องการใส่สีพื้นหลัง >

ช่องตาราง >คุณสมบัติช่อง > ไปตรงสีพื้นหลัง และคลิก เลือก > เจอหน้าจอสีขึ้นมา > เลือกสีที่ต้องการ > ตกลง เท่านี้ก็เรียบร้อย ตามรูป

รูป 5.33-16

๏ ตัวอย่าง เมื่อทำเรียบร้อย จะได้ตามรูป

รูป 5.33-17

๏ ถ้าต้องการใส่สีทั้งตาราง สามารถใส่ได้ โดยใช้คุณสมบัติช่อง โดยต้องใส่เนื้อหาหรือรูปภาพไปในทุกช่องของตาราง ที่จะใส่สี ตามตัวอย่างจะใส่สีพิ้นหลัง ทั้งตารงวิธีการคือพิมพ์เนื้อหาหรือใส่รูปเข้าไปที่ช่อง ทุกๆช่อง >ใช้เมาส์ลากทับเนื้อหา รูปภาพ ทุกรูป >คลิกขวา >ช่องตาราง >คุณสมบัติช่อง ตามรูป

รูป 5.33-18

ต่อ คลิกตารางที่ต้องการใส่สีพื้นหลัง > ช่องตาราง >คุณสมบัติช่อง > ไปตรงสีพื้นหลัง และคลิก เลือก > เจอหน้าจอสีขึ้นมา > เลือกสีที่ต้องการ > ตกลง เท่านี้ก็เรียบร้อย ตามรูป

รูป 5.33-19

รูป 5.33-20

๏ การเส้นขอบตารางเมื่อโชว์ที่หน้าเว็บไซต์ เวลาที่เราสร้างตารางขึ้นมา ก็จะมีเส้นขอบตารางติดมาด้วย บางที่เราไม่ต้องการ สามารถทำการ ลบได้ตามขั้นตอนนี้

รูป 5.33-20

๏ ตัวอย่างรูป มีเส้นขอบตาราง ตารางที่โชว์บนหน้าเว็บจริง

รูป 5.33-21

๏ ตัวอย่างรูป ไม่มีเส้นขอบตาราง ตารางที่โชว์บนหน้าเว็บจริง

รูป 5.33-19

๏ วิธีการเอาเส้นขอบออก คลิกขวา >คุณสมบัติตาราง >ขนาดของขอบรูป (Border) ใส่เลข 0 ลงไป ตามรูป ตัวอย่างรูป มีเส้นขอบตาราง

รูป 5.33-20