About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





ค้นหาข้อมูลใน 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

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



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

การปรับแต่งแก้ไขรูปภาพด้วย Dreamweaver

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

การใช้ CSS กับโปรแกรม Dreamweaver CC

เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC CSS ย่อมาจาก Cascading Style Sheets ...  

วิธีการใช้ Properties Panel และการกำหนดคุณสมบัติให้แก่ข้อความ

เรื่อง : การใช้ Properties Panel และการกำหนดคุณสมบัติข้อความเบื้องต้น Properties Panel เป็นส่วนที่ใช้ใ...  

การใส่เสียงเพลงประกอบเว็บเพจ หรือไฟล์ Audio ให้กับเว็บ (HTML5)

เรื่อง : วิธีการใส่เสียงเพลง (Audio) ประกอบหน้าเว็บด้วยโปรแกรม Dreamweaver CC บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*