About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

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

Go to Post-iT Sign Guestbook

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

วิธีการสร้างตาราง (Table) ให้แก่เว็บเพจ [Article ID : 106]

เรื่อง : การสร้างตาราง (Table) ด้วย Dreamweaver

การสร้างตาราง หรือ Table สำคัญ และมีความจำเป็นอย่างมากในการสร้างเว็บเพจ เพราะข้อมูลหลายอย่างที่ต้องนำเสนอบนหน้าเว็บนั้น ต้องมีการใช้ตารางเป็นส่วนช่วยในการนำเสนอ เช่น รายการสินค้า, รายชื่อพนักงาน เป็นต้น ครั้งนี้เราจะมาเรียนรู้พื้นฐานการสร้างตารางโดยใช้โปรแกรม Dreamweaver กัน...

วิธีการสร้างตารางด้วยโปรแกรม Dreamweaver

โปรแกรม Dreamweaver สามารถช่วยสร้างตารางกับเว็บเพจของเราได้ ซึ่งมีขั้นตอนต่าง ๆ ดังนี้

1. นำ Cursor ไปวางไว้ยังตำแหน่งที่ต้องการใส่แสดงตาราง
2. จากนั้นให้ทำการไปที่หน้าต่าง Insert -> Common -> Table ดังรูป

3. เมื่อเลือกไปที่ไอคอน Table ดังข้อ 2 แล้ว โปรแกรมจะทำการเปิดหน้าต่าง Table ขึ้นมาให้เรากำหนดค่า ดังรูป

ทำการกำหนดคุณสมบัติเบื้องต้นของตารางที่หน้าต่าง Table นี้
- Rows : กำหนดจำนวนแถวของตาราง (เซลตารางตามแนวนอน)
- Columns : กำหนดจำนวนคอลัมน์ของตาราง (เซลตารางตามแนวตั้ง)
- Width : กำหนดความกว้างของตาราง ตรงนี้เราสามารถกำหนดได้เป็น 2 แบบคือแบบ Pixels กับแบบ Percent (%)
- Border thickness : กำหนดค่าความหนาของกรอบตาราง
- Cell padding : กำหนดระยะห่างระหว่างกรอบของตาราง กับสิ่งที่อยู่ภายในเซล
- Cell spacing : กำหนดระยะห่างระหว่าง Cell ของตาราง

6. เมื่อกำหนดเสร็จแล้วก็ทำการ Click ที่ OK เท่านี้ก็จะได้ตารางตามที่ต้องการ

ถ้าตารางที่สร้างขึ้นมาแล้วต้องการเปลี่ยนแปลงแก้ไข ให้ทำการ Click เลือกที่ตารางนั้น แล้วทำการแก้ไข หรือกำหนดคุณสมบัติให้แก่ตารางใหม่ได้ที่หน้าต่าง Properties Panel ของตาราง ซึ่ง DwThai.Com จะนำเสนอการใช้งาน Properties Panel กับ 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 Panel และการกำหนดคุณสมบัติให้แก่ข้อความ

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

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

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

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

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

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

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