การสร้างตาราง

การสร้างตาราง
        ในการออกแบบเว็บเพจ ส่วนใหญ่แล้วในหน้าเว็บเพจ จะมีข้อมูลที่เป็นตัวหนังสือ ตัวเลข รูปภาพ แผนภูมิ กราฟ และอื่น ๆ แต่มีสิ่งหนึ่งที่จะเห็นอยู่บ่อย ๆ ในหน้าเว็บเพจ คือ ตาราง ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนนมาก มีทั้งตัวหนังสือ ตัวเลข รูปภาพ ที่ต้องการจัดระเบียบให้ดูง่าย สบายตา เช่น ตารางประวัติบุคลากร ตารางคะแนนของนักเรียน ตารางทะเบียนคุรุภัณฑ์ เป็นต้น ซึ่งตารางจะอยู่ในรูปของแถวและคอลัมน์ และจัดวางไว้ในหน้าเว็บเพจอย่างเหมาะสม
         การสร้างตาราง ใน Dreamweaver 8 มีขั้นตอนง่าย ๆ เพราะมีเครื่องมือช่วยสร้างตารางได้ตามต้องการ เช่น เราจะสร้างตาราง 4 คอลัมน์ 4 แถว, มีเส้นขอบขนาด 2 พิกเซล, ระยะระหว่างขอบเซลล์กับข้อความภายในเซลล์ (Cell padding) เป็น 5 พิกเซลล์ , ระยะห่างระหว่างแต่ละเซลล์ (Cell spacing) เป็น 5 พิกเซล และกำหนดให้แถวแรกของตารางเป็นหัวข้อ ดังภาพ

        ขั้นตอนในการสร้างตาราง มี ให้เลือก 3 วิธี คือ

  • วิธีที่ 1 เลือกเมนู Insert >Table ดังภาพ

  • วิธีที่ 2 ที่กลุ่มเครื่องมือ Common หรือกลุ่มเครื่องมือ Layout เลือกคลิกที่

  • วิธีที่ 3 กดที่คีย์บอร์ด < Ctrl + Alt + T>

        โดยทั้ง 3 วิธีนี้ จะแสดงหน้าต่าง Table ใช้สำหรับกำหนดรายละเอียดเกี่ยวกับตาราง ดังภาพ

        รายละเอียดของตาราง สามารถอธิบายได้ ดังนี้

  • หมายเลข 1 Rows : กำหนดจำนวนแถว
  • หมายเลข 2 Columns : กำหนดจำนวนคอลัมน์
  • หมายเลข 3 Table width : ความกว้างของตาราง มีหน่วยเป็น พิกเซล หรือเปอร์เซนต์
  • หมายเลข 4 Border thickness : ความหนาของตาราง
  • หมายเลข 5 Cell padding : ระยะห่างระหว่างขอบเซลล์กับข้อความภายในเซลล์
  • หมายเลข 6 Cell spacing : ระยะห่างระหว่างเซลล์แต่ละเซลล์ ทั้งแนวตั้งและแนวนอน
  • หมายเลข 7 None : ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง
  • หมายเลข 8 Left : กำหนดให้คอลัมน์แรกเป็นหัวข้อของเซลล์
  • หมายเลข 9 Top : กำหนดให้แถวแรกของตารางเป็นหัวข้อของเซลล์
  • หมายเลข 10 Both : กำหนดให้ทั้งแถวและคอลัมน์แรกเป็นหัวข้อของเซลล์
  • หมายเลข 11 Caption : กำหนดหัวข้อของตาราง
  • หมายเลข 12 Align caption : จัดวางหัวข้อของตารางไว้ในตำแหน่งที่ต้องการ
    • default : ไม่มีการกำหนดค่า ใช้ค่าที่กำหนดแบบอัตโนมัติ คือ จัดวางหัวข้อของตารางไว้ข้างบนและจัดวางตรงกลางของตาราง ดังภาพ

    • Top : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งตรงกลางของตาราง
    • bottom : จัดวางหัวข้อของตารางไว้ด้านล่าง และจัดตำแหน่งตรงกลางของตาราง
    • left : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งชิดซ้ายของตาราง
    • right : จัดวางหัวข้อของตารางไว้ด้านบน และจัดตำแหน่งชิดขวาของตาราง
  • หมายเลข 13 Summary : เขียนคำอธิบายเกี่ยวกับตาราง แสดงให้เห็นบนหน้าเว็บ
  • หมายเลข 14 คลิกปุ่ม OK เมื่อกำหนดค่าตามต้องการเสร็จแล้ว
 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s