การรวมเซลของตาราง หรือการ 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

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

ว่าด้วยเรื่อง Tag Selectors ของ Dreamweaver

เรื่อง : แนะนำการใช้ Tag Selectors ใน Dreamweaver Tag Selectors มีประโยชน์อย่างมากในการใช้งานโปรแกรม ในกา...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

ก้าวแรกของนักพัฒนาเว็บ : ทำความรู้จักกับโปรแกรม Dreamweaver

เรื่อง : ก้าวแรกสู่การเป็นนักพัฒนาเว็บไซต์ เริ่มทำความรู้จักกับโปรแกรม Dreamweaver Dreamweave...  

การกำหนด Properties หรือคุณสมบัติของตาราง

เรื่อง : การกำหนดคุณสมบัติ หรือ Properties ให้แก่ตาราง (Table) ในบทก่อนได้กล่าวถึงการสร้างตารางไปแล้ว และได้อธิบายถึงกา...