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

การสร้างตารางสามารถทำได้ง่าย ๆ เพราะมีเครื่องมือ ช่วยสร้างตารางบนเว็บเพจของเราได้ตามต้องการ วิธีการสร้างตารางนั้น มีขั้นตอนในการสร้างอยู่ 3 วิธีคือ

วิธีที่ 1 เลือกเมนูคำสั่ง Insert > Tableวิธีที่ 2 เลือกเครื่องมือ (Table) ที่แท็บ Common หรือแท็บ Layout

วิธีที่ 3 กดคีย์ ที่คีย์บอร์ด

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

กลุ่มของ  Table Size  กำหนดรายละเอียดดังนี้

Rows

จำนวนแถวที่ต้องการ

Colums

จำนวนคอลัมภ์ที่ต้องการ

Table Width

ความกว้างของตาราง หน่วยที่ใช้จะเป็นเปอร์เซ็น หรือพิกเซล

Border Thickness

ความหนาของขอบตาราง

Cell padding

ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์

Cell spacing

ระยะห่างระหว่างแต่ละเซลล์ในตาราง

 

กลุ่ม  Header  เลือกตำแหน่งของหัวเรื่องภายในตารางดังนี้

Header

กำหนดให้เราสามารถพิมพ์หัวข้อของข้อมูลภายในเซลล์ และจัดวางตรงส่วนไหนของตาราง โดยกำหนดได้ดังนี้

 

ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง

กำหนดให้คอลัมภ์แรกเป็นหัวข้อของเซลล์

กำหนดให้แถวแรกเป็นหัวข้อของเซลล์

กำหนดให้ทั้งแถวและคอลัมภ์แรกเป็นหัวข้อของเซลล์

 

กลุ่ม  Accessibility  กำหนดข้อมูลทั่วไปในตาราง  ดังนี้

Caption

กำหนดหัวข้อของตาราง

 

Align caption

จัดวางหัวข้อของตารางไว้ในตำแหน่งที่ต้องการโดยที่

 

 

default

ไม่มีการกำหนดค่า ให้ใช้ค่าปกติ นั่นคือจัดวางห้วข้อของตารางไว้ข้างบนและจัดวางตรงกลางของตาราง

 

top

จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งตรงกลางของตาราง

 

bottom

จัดวางหัวข้อของตารางไว้ด้านล่าง และจัดตำแหน่งตรงกลางของตาราง

 

left

จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งไว้ชิดซ้ายของตาราง

 

right

จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งไว้ชิดขวาของตาราง

Summary

เขียนคำอธิบายเกี่ยวกับตาราง แต่จะไม่แสดงให้เห็นบนหน้าเว็บ จะถูกฝังไว้ในโค้ด HTML เท่านั้น

เมื่อกำหนดค่าตามที่เราต้องการในหน้าต่าง Table แล้ว ให้เราคลิกปุ่ม เราก็จะได้ตารางตามที่กำหนดไว้ เช่น สร้างตารางแบบ 3 แถว  3  คอลัมน์  เมื่อคลิกปุ่ม  OK  จะได้ตารางลักษณะนี้

 

การปรับแต่งตาราง

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

Horz 

คือ จัดตำแหน่งเคอร์เซอร์ด้านยาว

Vert  

คือ จัดตำแหน่งเคอร์เซอร์ด้านกว้าง

W      

คือ กำหนดขนาดด้านยาว

H       

คือ กำหนดขนาดด้านกว้าง

Bg     

คือ ภาพพื้นหลัง หรือ สีพื้นหลัง

Brdr   

คือ สีเส้นขอบ

เมื่อคลิกเลือกตาราง

ที่ Properties Inspector  ปรากฏคุณสมบัติของตารางขึ้นมา  สามารถปรับเปลี่ยนได้ตามต้องการ

คำสั่งเกี่ยวกับการปรับแต่งตาราง

นอกจากการใช้ Property Inspector เราสามารถเรียกคำสั่งเกี่ยวกับการปรับแต่งตารางได้ โดยการคลิกที่เซลล์ แล้วเลือกคำสั่ง Modify>Table หรือจะคลิกเมาส์ปุ่มขวาตรงตาราง ที่ต้องการปรับแต่ง และเลือกคำสั่ง Table ในเมนูย่อยก็ได้

การแทรกแถวและคอลัมน์

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

การแทรกแถว

1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่ง ของเซลล์ที่ต้องการจะแทรกแถว2. คลิกเมาส์ปุ่มขวาในเซลที่ต้องการแทรก จะปรากฎเมนูย่อยให้เลือก Table>Insert Row หรือ เลือกคำสั่ง Modify>Table>Insert Row หรือกดคีย์ ก็ได้3. จะปรากฎแถวขึ้นมาหนึ่งแถว ซึ่งมีขนาดของเซลล์เท่ากับขนาดของแถวเดิม

การแทรกคอลัมภ์

1. คลิกเมาส์เพื่อวางเคอร์เซอร์ตรงตำแหน่งเซลที่ต้องการจะแทรกคอลัมน์ 2. คลิกเมาส์ปุ่มขวาจะปรากฎเมนูย่อย ให้เลือก Table>Insert Column หรือเลือกคำสั่ง Modify>Table>Insert Column หรือกดคีย์ ก็ได้3. จะปรากฎคอลัมน์ใหม่แทรกขึ้นมาตรงตำแหน่งที่เคอร์เซอร์วางอยู่

การลบแถวและคอลัมน์

การลบแถว

1. เลือกแถวที่ต้องการจะลบแล้วกดปุ่ม ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวา เลือกเซลล์ใดก็ได้ ในแถวที่ต้องการจะลบแล้วเลือก Table>Delete Row หรือเลือกคำสั่ง Modify>Table>Delete Row หรือกดคีย์ลัด

2. แถวที่เลือกไว้ก็จะหายไป

การลบคอลัมน์

1. เลือกคอลัมน์ที่ต้องการจะลบแล้วกดปุ่ม ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวา เลือกเซลล์ใดก็ได้ ในแถวที่ต้องการจะลบแล้วเลือก Table>Delete Column หรือเลือกคำสั่ง Modify>Table>Delete Column หรือกดคีย์ลัด

2. คอลัมน์ที่เลือกไว้ก็จะหายไป

กำหนดสีพื้นของตาราง

คลิกเลือกตาราง แล้วใส่สีพื้นหลังโดยคลิกที่ ใน Property Inspector แล้วเลือกสีที่ต้องการ

กำหนดสีเส้นขอบตาราง

การกำหนดรูปภาพให้เป็นพื้นหลังของตาราง

ให้คลิกเลือกตาราง แล้วคลิกเมาส์ปุ่ม ในช่อง Bg Image เลือกไฟล์ภาพที่ต้องการทำเป็นพื้นหลังของตาราง

การใส่ข้อมูลลงในตาราง

ตารางที่สร้างเสร็จแล้วสามารถใส่ข้อมูลลงไปได้ 2 ประเภทหลัก ๆ  คือ  ข้อมูลข้อความ และข้อมูลรูปภาพหรือวัตถุ

ข้อมูลข้อความ ข้อมูลข้อความ  หมายรวมถึงตัวอักษร ตัวเลข  อักษรพิเศษ  หรือสัญลักษณ์ต่าง ๆ  มีวิธีการใส่ในตาราง  ดังนี้

1. คลิกที่เซลล์ที่จะใส่ข้อความ2. เคอร์เซอร์จะปรากฏอยู่ในช่องเซลล์นั้น  พิมพ์ข้อความลงไปเหมือนโปรแกรมเวิร์ด3. ถ้าข้อความยาวมาก ๆ  ให้กดแป้น  < Enter >4. ถ้าต้องการพิมพ์ข้อมูลเพิ่มเติมในเซลล์ใด ก็คลิกที่เซลล์นั้น ๆ  และพิมพ์ข้อมูลได้ทุกเซลล์

ข้อมูลรูปภาพ การใส่รูปภาพในเซลล์มีวิธีการเหมือนกับการใส่ภาพในเว็บเพจ ซึ่งมีขั้นตอนดังนี้

1. คลิกที่ช่องเซลล์ที่ต้องการจะใส่รูปภาพ2. คลิกที่เครื่องมือรูปภาพ  หรือคำสั่ง  Insert >> Image3. จะได้หน้าต่าง  Select Image Source  เลือกรูปภาพที่ต้องการแล้วคลิก  OK

4. ภาพจะแทรกในเซลล์นั้นทันที5. ปรับขนาดของภาพให้เหมาะสมกับตาราง

ใบงานที่ 5.1หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง

จุดประสงค์

1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้  (K)

2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)

3. มีความขยัน  อดทน  และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ 

คำสั่ง ให้นักเรียนแทรกตารางลงในโปรแกรม Macromedia Dreamweaver 8 แล้วจัดตกแต่งให้สวยงาม โดยปฏิบัติดังต่อไปนี้

1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5  เรื่อง ปรับแต่งเว็บเพจด้วยตาราง

2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป

เลขที่

ชื่อ-นามสกุล

เพศ

อายุ

ที่อยู่

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

กำหนดให้บันทึกข้อมูลของเพื่อนๆในห้องเรียน จำนวน 5 คน ตามรูปแบบตารางข้างต้น

 

 

ใบงานที่ 5.2หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง

จุดประสงค์

1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้  (K)

2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)

3. มีความขยัน  อดทน  และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ 

คำสั่งให้นักเรียนแทรกตารางลงในโปรแกรม Macromedia Dreamweaver 8 แล้วจัดตกแต่งให้สวยงาม โดยปฏิบัติดังต่อไปนี้

1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5  เรื่อง ปรับแต่งเว็บเพจด้วยตาราง

2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป

รายการหนังสือ

Photoshop

Microsoft Excel

Microsoft Word

Dreamweaver 8

 

 

ใบงานที่ 5.3หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง

จุดประสงค์

1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้  (K)

2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)

3. มีความขยัน  อดทน  และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ 

คำสั่ง

1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5  เรื่อง ปรับแต่งเว็บเพจด้วยตาราง

2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป

3. ใช้ตารางใส่รูปภาพที่มีการแบ่งรูปภาพที่มีขนาดใหญ่ เพื่อลดเวลาในการเรียกรูปนั้นให้เร็วยิ่งขึ้น   โดยมีขั้นตอนการปฏิบัติ  ดังนี้

· สร้างตาราง ขนาด 7 แถว 1 คอลัมภ์ และกำหนด border = 0

· นำรูปภาพที่ผ่านการแบ่งรูปภาพ จำนวน 7 รูป นำมาใส่ตาราง

· ปรับขนาดของช่องตารางให้รูปชิดกันมากที่สุด  ดังรูป