Dreamweaver CS

สร้างตารางในเว็บเพจ

สร้างตารางด้วยวิธีง่ายๆ

ขั้นตอนการสร้างตารางมีดังนี้

1. คลิกที่ปุ่มรูปตารางดังรูป



2. จะมีหน้าต่างขึ้นมาดังรูป



รายละเอียดมีดังนี้

1. rows จำนวนแถวของตาราง

2. columns จำนวนหลักของตาราง

3. Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent(%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ ก็ได้

4. Border thickness ความหนาของเส้นขอบตาราง ถ้าเราไม่ต้องการให้มีเส้นขอบให้ใส่เป็น 0

5. Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง

6. Cell spacing ระยะห่างระหว่างช่อง

7. Header จัดหัวข้อของตาราง <th> ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 3 แบบ คือ

7.1 left ให้หลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง 7.2 top แถวบนสุดเป็นหัวข้อ

7.3 Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อ

8. Caption ใส่ชื่อตาราง

9. Align caption จัดตำแหน่งของชื่อตาราง

10. Summary บรรยายตาราง

รายละเอียดที่เราจะเป็นต้องกรอกจะอยู่ในหัวข้อ Table size หรือรายการ 1-6 เท่านั้นนอกจากนั้นไม่จำเป็นต้องกรอกก็ได้

3. เมื่อเลือกที่ตารางจะเห็นว่า Property inspector เป็นดังรูปด้านล่าง



รายละเอียดมีดังนี้

1. Table id กำหนดชื่ออ้างอิงให้กับตาราง

2. rows กำหนดจำนวนแถวของตาราง ถ้าคุณเปลี่ยนจำนวนแถวให้น้อยลง โปรแกรมจะลบจากแถวล่างสุด

3. cols กำหนดจำนวนหลักของตาราง ถ้าคุณเปลี่ยนจำนวนหลักให้น้อยลง โปรแกรมจะลบจากหลักขวาสุด

4. W (Width) กำหนดความกว้างของตาราง

5. H (Height) กำหนดความสูงของตาราง ไม่แนะนำให้กรอกค่านี้ เพราะคำสั่งนี้ยังไม่สนับสนุน XHTML 1.0.

6. CellPad ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง

7. CellSpaceระยะห่างระหว่างช่อง

8. Align จัดตำแหน่งของตาราง

9. Borderกำหนดความหนาของขอบ

10. Class กำหนด class ใน css

11. Clear and Convert ปุ่มทางล่างซ้ายจะมีอยู่ 2 ประเภท คือ

11.1.ปุ่ม clear ใช้ในการลบความกว้างและความสูงของตาราง

11.2.ปุ่ม convert สลับหน่วยของความสูง,ความกว้างของตาราง เป็น px หรือ %

12. Bg Color กำหนดสีพื้นหลังของตาราง คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี

13. Bg Image กำหนดภาพพื้นหลังของตาราง

14. Brdr Color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี


เลื่อนขึ้นด้านบน