การรวมเซลของตาราง หรือการ Merges Cells [Article ID : 108]

เรื่อง : การรวมเซลของตาราง (Merges Cells)

บางครั้งเมื่อเราสร้างตาราง (Table) ขึ้นมาซึ่งประกอบด้วยเซล (Cell) หลาย ๆ เซล เราอาจจะมีความจำเป็นที่เราต้องการให้เซลต่าง ๆ ในแต่ละแถว (Row) หรือคอลัมน์ (Column) ที่ไม่เท่ากัน เช่น แถวที่ 1 เราต้องการ 3 เซลหรือ 3 คอลัมน์ แต่ในแถวที่ 2 เราต้องการเป็น 2 เซล ดังตัวอย่าง เป็นต้น

วิธีการรวมเซลของตารางให้เป็นเซลเดียวกันโดยใช้ Dreamweaver

ก่อนที่จะไปทำการรวมเซลได้นั้น ให้สร้างตาราง (อ่านการสร้างตาราง) ขึ้นมาเสียก่อน โดยอาจจะสร้างเป็นตารางขนาดและจำนวนคอลัมน์ หรือแถวตามที่ต้องการ จากนั้น จึงมาทำการรวมเซลตามขั้นตอนต่าง ๆ ดังนี้

1. ที่ตารางที่สร้าง ให้ทำการเลือกเซลที่เราต้องการนำมารวมกัน โดยใช้วิธีการ Drag เลือก เมื่อเลือกแล้วเซลที่ถูกเลือกจะมีกรอบสีดำล้อม ดังรูป

2. เมื่อเลือกเซลได้ตามจำนวนที่ต้องการในข้อ 1 แล้ว ให้มาที่ Properties Panel เพื่อทำการรวมเซล
โดยการกดไปที่ไอคอน Merges selected cells using spans ดังรูป

3.โปรแกรมจะทำการรวมเซลที่เราเลือกไว้ให้เป็นเซลเดียวกัน ดังรูป

การประยุกติ์ใช้การรวมเซลเพื่อการจัดวางข้อมูลบนหน้าเว็บเพจ

สำหรับการประยุกติ์ใช้การ Merges Cells นี้ไปใช้ในการจัดวางข้อมูลบนเว็บเพจนั้น เราสามารถนำไปใช้ได้หลากหลาย ดังรูปตัวอย่าง

เมื่อตบแต่งและทำการพรีวิวดูผลกับ Web Browser

การใช้งาน Table หรือตาราง ถือว่าเป็นพื้นฐานที่นักพัฒนาเว็บไซต์ต้องเรียนรู้ และใช้งานกันได้เป็นอย่างดี อย่างไรก็ลองศึกษาและประยุกติ์ใช้งานกันดูครับ...

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การสร้าง Form และ Input สำหรับกรอกข้อมูล

เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver Form หรือ ฟอร...  

วิธีการสร้างตาราง (Table) ให้แก่เว็บเพจ

เรื่อง : การสร้างตาราง (Table) ด้วย Dreamweaver การสร้างตาราง หรือ Table สำคัญ และมีความจำเป็นอย่างมากในการสร้างเว็บเพ...  

สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor)

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver Web Page เราสามารถกำหนดจุด หรือตำแห...  

วิธีการนำรูปภาพเข้ามาใช้งานใน Web Page ด้วย Dreamweaver

เรื่อง : การใส่รูปภาพให้กับ Web Page ด้วยโปรแกรม Dreamweaver การจัดทำ Web Page แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจากตัวหน...