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

Dreamweaver

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

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

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 กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี

---

การสร้างตารางก็มีเพียงเท่านี้ ในบทต่อไปจะเป็นการแยก และผสาน ช่องของตาราง