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

           การใช้ตาราง เหมาะสำหรับการนำเสนอข้อมูลจำนวนมากที่ต้องการจัดให้เป็นระเบียบ โดยอยู่ในรูปแบบของแถว และคอลัมน์ เช่น การจัดเก็บคะแนน, ข้อมูลหุ้น และการแสดง ยอดขายสินค้าชนิดต่าง ๆ เป็นต้น นอกจากนี้จะช่วยในการจัดองค์ประกอบต่าง ๆ ในเว็บเพจให้อยู่ในตำแหน่งที่ต้องการได้อย่างเป็นสัดส่วนอีกด้วย ดังตัวอย่างเป็นตารางข้อความ สำหรับการจัดอันดับภาพยนตร์

ที่มา : https://www.boxofficemojo.com/alltime/domestic.htm

นอกจากนี้ ยังสามารถแทรกภาพรวมกับข้อความในช่องตารางแต่ละช่อง เพื่อแบ่งแยกข้อความที่ใช้ประกอบภาพในแต่ละภาพได้อย่างชัดเจน และเป็นระเบียบ ดังตัวอย่างเป็นตาราง ข้อความอธิบายข่าวกีฬาที่น่าสนใจ โดยมีภาพแสดงอยู่ด้วย

ที่มา : https://www.sanook.com

โครงสร้างและส่วนประกอบของตาราง           1 คอลัมน์ (Column) หรือเซลล์ในแนวตั้ง           2 แถว (Row) หรือเซลล์ในแนวนอน           3 เซลล์ (Cell) หรือช่องของตาราง

วิธีสร้างตาราง          การสร้างตารางในโปรแกรม Dreamweaver สามารถทำได้ง่าย ๆ เพราะมีเครื่องมือ (Table) ที่ช่วยสร้างตาราง บนหน้าเว็บได้ตามต้องการ วิธีการสร้างตารางมีขั้นตอนในการสร้างอยู่ 3 วิธี คือ           วิธีที่ 1 เลือกเมนู Insert -> Table           วิธีที่ 2 เลือกเครื่องมือ (Table) ที่แท็บ Common หรือแท็บ Layout           วิธีที่ 3 กดคีย์ <Ctrl>+<Alt>+<T> ที่คีย์บอร์ด           โดยทั้ง 3 วิธีจะแสดงหน้าต่าง Table สำหรับใช้กำหนดรายละเอียดเกี่ยวกับตาราง ดังนี้ Rows จำนวนแถวที่ต้องการ Columns จำนวนคอลัมน์ที่ต้องการ Table Width ความกว้างของตาราง หน่วยที่ใช้จะเป็นเปอร์เซ็นต์ หรือพิกเซล Border thickness ความหนาของขอบตาราง Cell padding ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์ Cell spacing ระยะห่างระหว่างแต่ละเซลล์ในตาราง Header กำหนดหัวข้อของข้อมูลในตารางและการจัดวาง โดยกำหนดได้ดังนี้ ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง กำหนดให้คอลัมน์แรกเป็นหัวข้อของข้อมูลในตาราง กำหนดให้แถวแรกเป็นหัวข้อของข้อมูลในตาราง กำหนดให้ทั้งแถว และคอลัมน์แรกเป็นหัวข้อของข้อมูลในตาราง Caption กำหนดหัวข้อของตาราง Summary เขียนคำอธิบายเกี่ยวกับตาราง ซึ่งจะถูกฝังไว้ในโค้ด HTML และไม่ถูกแสดงออกมาให้เห็นบนหน้าเว็บ          เมื่อกำหนดค่าตามที่ต้องการในหน้าต่าง Table แล้ว ให้คลิกปุ่ม OK ก็จะได้ตารางตามที่กำหนดไว้ ซึ่งใน Dreamweaver เมื่อสร้างตารางจะเห็นส่วนที่เรียกว่า "ส่วนที่่ใช้จัดการตาราง/คอลัมน์" เพิ่มขึ้นมา ซึ่งมีประโยชน์ในการจัดระเบียบตาราง

การปรับขนาดช่องตาราง          เราสามารถปรับขนาดของช่องตารางในแถว หรือคอลัมน์ให้ได้ส่วนตามที่ต้องการ โดยการคลิกที่เส้นตาราง และลากเมาส์ปรับขนาดตามที่ต้องการ           1 เมื่อคลิกที่เส้นแนวนอนภายในตาราง ตัวชี้เมาส์จะเปลี่ยนเป็นรูป เพื่อปรับขนาดตารางในแนวนอน โดยการลากเมาส์ปรับขนาด           2 เมื่อคลิกที่เส้นแนวตั้งภายในตาราง ตัวชี้เมาส์จะเปลี่ยนเป็นรูป เพื่อปรับขนาดตารางในแนวตั้ง โดยการลากเมาส์ปรับขนาด

การเพิ่มข้อมูลในตาราง          เราสามารถใส่ข้อมูลเข้าไปในตารางที่สร้างได้ โดยคลิกเลือกช่องเซลล์ที่ต้องการ แล้วพิมพ์ข้อความหรือหรือภาพลงไปได้เลย ใส่ข้อความในตาราง          คลิกเลือกช่องเซลล์ที่ต้องการ แล้วพิมพ์ข้อความลงไปได้เลย           1 คลิกเมาส์ที่ช่องเซลล์ที่ต้องการใส่ข้อความ           2 พิมพ์ข้อความที่ต้องการลงไปในช่องตารางและปรับแต่งข้อความตามต้องการ ใส่ภาพในตาราง          คลิกเลือกช่องเซลล์ที่ต้องการ แล้วพิมพ์ข้อความลงไปได้เลย           1 คลิกเมาส์ที่ช่องตารางที่ต้องการใส่ภาพ           2 ใช้เครื่องมือ เข้าไปเลือกไฟล์ภาพ จากนั้นคลิกปุ่ม OK           3 แสดงผลลัพธ์ที่เราใส่ภาพในช่องตาราง           การจัดการภาพสามารถศึกษาจากบทเรียนเรื่อง การจัดการรูปภาพ