Recommended
More Related Content
Viewers also liked
Similar to หน่วยที่ 7
More from Ton TC Tmsb
More from Ton TC Tmsb (6)
หน่วยที่ 7
- 2. การใช้ตาราง เหมาะสาหรับการนาเสนอเป็นจานวนมาก เช่น ข้อมูลการซื้อขายหลักทรัพย์ยอดขายสินค้าบริษัท หรือสรุปปริมาณ สินค้าคงคลังที่ควรนามาจัดในรูปแบบแถวและหลัก นอกจากนี้ตารางยังมีประโยชน์ในการช่วยจัดองค์ประกอบต่างๆ นะเว็บเพจที่อยู่ในตาแหน่งที่ต้องการได้เป็นอย่างเป็นสัดส่วน อีกด้วย ในบทนี้ เราจะมารูปจักกับการสร้างตารางในรูปแบบต่างๆ เพื่อแต่งให้เว็บเพจของเราดูน่าสนใจมากขึ้น
- 3. จานวนแท็ก tr เป็นการกาหนดจานวนแถวในตาราง และจานวนแท็ก td เป็นการกาหนดคอลัมน์ในแต่ละแถว ในตัวอย่างสร้าง ข้อมูลขึ้นมา 2 แถว 3 คอลัมน์
- 4. การใส่หัวข้อ <th> และตีเส้นตาราง เราสามารถตกแต่งตารางให้ดูง่ายขึ้น โดยการใส่หัวคอลัมน์หรือหัวแถว เพื่ออธิบายความหมายของข้อมูลภายในคอลัมน์หรือ ภายในแถว โดยใช้แท็ก <th> ซึ่งจะมีลักษณะการใช้งานเหมือนแท็ก td แต่ข้อความภายในแท็กจะเป็นตัวหนา เป็นการเน้นข้อความ นอกจากนี้การตีเส้นตารางเพื่อยกข้อมูลแต่ละช่องออกจากกัน เราก็สามารถทาได้โดยการใส่แอตทริบิวต์ barder ในแท็กtable ซึ่งมีรูปแบบ
- 5. การกาหนดข้อความกากับให้กับตาราง <caption> การใส่ข้อความกากับ จะช่วยให้ทราบได้ว่าตารางนั้นนาเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้ ตัวอย่างการใช้ข้อความกากับตาราง
- 7. เว้นระยะห่างข้อมูลในเซลล์กับกรอบเซลล์ เราสามารถปรับขนาดของช่องตาราง ให้มีที่ห่างระหว่างข้อมูลกับกรอบช่องเซลล์ เพื่อความสวยงาม ตัวอย่างการปรับที่ว่างในตาราง ให้ลองเปลี่ยนคาตัวเลข โดยเมื่อเรากาหนด ค่า cellpadding เป็น 0 จะพบว่าไม่มีพื้นที่ว่าง ระหว่างข้อมูลและขอบช่องตาราง
- 8. ปรับความกว้างอละความสูงของตาราง ในตัวอย่างการสร้างตารางที่ผ่านมาความกว้างของตารางนั้นถูกกาหนดโดยข้อมูลในแต่ละช่อง ทาให้ขนาดตารางที่ได้อาจไม่ เหมาะสม ซึ่งเราสามารถขนาดความกว้างของตารางได้เอง ตัวอย่างการกาหนดความกว้างของตาราง ค่าความกว้างนั้นคือเปอร์เซ็นความกว้างของตารางที่ต้องการ โดยเทียบกับขนาดของหน้าจอบราวเซอร์ ตัวอย่างการกาหนดความสูงของตาราง ให้ลองเปลี่ยนจากคาสั่ง width เป็น height=”60%”
- 9. ปรับขนาดของเซลล์ ปกติช่องเซลล์ 1 ช่อง จะมีขนาด 1 แถว 1 คอลัมน์ แต่ในบางกรณีเราต้องการใช้ช่องเซลล์ขนาดอื่น เช่น 1 แถว 5 คอลัมน์ หรือ 2 แถว 2 คอลัมน์ เป็นตัน เมื่อเราต้องการใช้ช่องเซลล์เกิน1 คอลัมน์ ตัวอย่างการขยายช่องเซลล์ออกเกิน 1 คอลัมน์ ตัวอย่างการกาหนดช่องเซลล์ออกเกิน 1 แถว ดังนี้
- 11. การกาหนดสีในกรอบตาราง เราสามารถแต่งสีให้กับกรอบของตารางเพื่อทาให้ตารางดูสะดุดตามากขึ้น โดยการใช้แอตทริบิวต์ bordercololr ใส่ลงในแท็ก table ตัวอย่างการใส่สีกรอบ
- 13. กาหนดการแสดงเส้นตาราง เป็นการกาหนดให้แสดงหรือไม่แสดงเส้นของตารางบางด้าน เพื่อความเหมาะสมสาหรับการแสดงข้อมูลบางประเภท เช่น ไม่ แสดงเส้นเฉพาะคอลัมน์ ตัวอย่างการเปิด/ปิดเส้นตาราง
- 16. การใส่รูปในตาราง วิธีการสาหรับนารูปภาพมาใส่ในช่องตาราง นั้นคล้ายการนาข้อความมาใส่ในตารางทั่วไป เพียงแต่เราต้องใช้แท็ก<img src…> เพื่อระบุรูปที่เราต้องการมาแสดง ตัวอย่างการใส่รูปลงในตาราง
- 17. การกาหนดความกว้างของคอลัมน์ <colgroup> ถ้าเราต้องการกาหนดความกว้างของคอลัมน์ในตาราง เราสามารถกาหนดได้โดยใช้แท็ก ตัวอย่างการใช้แท็ก colgroup กาหนดความกว้างคอลัมน์
- 18. กาหนดความกว้างแต่ละคอลัมน์ <col> ในตัวอย่างก่อนหน้านี้เราสามารถจาแนกของคอลัมน์ที่เราจะใช้ในการตั้งค่าความกว้างได้แต่ความจากัดของแท็ก เราไม่สามารถ กาหนดความกว้างของคอลัมน์อื่นๆ ได้นอกเหนือจากที่เรากาหนดใน span ดังนั้นถ้าเรากาหนดคอลัมน์อื่นๆ ตัวอย่างการใช้แท็ก col กาหนดคอลัมน์ จากตัวอย่างจะเห็นว่ามีการใส่แท้ก col อยู่ 3 ที่ด้วยกัน
- 19. การแบ่งส่วนตาราง <thead>,<tfoot>,<tbody> โดยปกติข้อมูลที่อยู่ในตารางจะเป็นข้อมูลเนื้อหาส่วนใหญ่และก้เป็นส่วนของหัวคอลัมน์เพื่อแสดงความหมายของข้อมูลนั้น ซึ่งเราจะใช้แท็ก th ที่กล่าวไป เราก็สามารถทาได้3 ส่วน คือ ตัวอย่างจัดประเภทข้อมูลในตาราง