About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

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

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

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

Cell 1	Cell 2	Cell 3
Cell 1	ตัวอย่างการรวมเซลที่ 2 - 3 ของแถวที่ 2 เข้าด้วยกัน

การที่เราจะทำเช่นนั้นได้ต้องมีการรวมเซลหรือที่เราเรียกกันว่า Merges Cells คือการรวมเซลที่อยู่ใกล้เคียงเข้าด้วยกัน ซึ่งในบทความนี้เราจะมาดูวิธีการทำกันครับ ดังนี้

วิธีการรวมเซลของตารางให้เป็นเซลเดียวกันโดยใช้ 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

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

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

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

การแทรกวัน-เวลาเพื่อแสดงบนเว็บเพจ (Insert Date)

เรื่อง : การพิมพ์วันที่-เวลาเพื่อแสดงผลที่หน้าเว็บเพจ หลายครั้งการสร้าง Web Page ขึ้นมา เราต้องการบันทึกวัน-เวลาลงไปแสด...

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

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

การใส่สัญลักษณ์พิเศษให้กับข้อความบนหน้าเว็บเพจ