เรื่อง :: กฏการใช้ตารางในการออกแบบ Webpage
มีผู้คนที่เริ่มออกแบบเว็บเพจหลาย ๆ คน มักมีปัญหาในการใช้งานตารางในการออกแบบเว็บเพจ ไม่ว่าจะเป็นการ Layout หรือการใช้ตารางในการเก็บข้อมูลก็ดี เช่น ใช้งานแล้วมันไม่ได้ดังใจ กำหนดขนาดเป็นเท่านั้นเท่านี้แล้ว แต่ก็ยังไม่ได้เป็นไปดังที่คิดไว้ เป็นต้น บทความนี้จึงเขียนเรื่องของตารางขึ้นมาเพื่อพอจะเป็นแนวทางให้เราเข้าใจระบบตารางที่เราใช้กับหน้าเพจของเราได้บ้าง ไม่มากก็น้อยครับ
กฏของตาราง
ตาราง |
Table |
Table |
ตาราง |
ตาราง |
Table |
1. ตารางจะมีขนาดเล็กกว่าปริมาณข้อมูลซึ่งอยู่ภายในตารางนั้นไม่ได้ เช่น ข้อมูลคุณมีขนาดเป็น 200 pixels แต่คุณจะกำหนดให้ตารางมีขนาดเป็น 180 pixels ไม่ได้ ถึงเราจะสามารถกรอกตัวเลขลงไปในค่าของ width หรือ height ก็ตาม ขนาดที่กรอกลงไปนั้น ไม่ได้หมายความว่า ตารางนั้นจะมีขนาดดังที่คุณกำหนดนั้นไว้ไม่ เพราะตารางจะทำการขยายออกตามปริมาณข้อมูลซึ่งอยู่ภายในตารางนั้น
2. ถ้าความกว้างของตาราง และความกว้างของเซลมีความไม่สัมพันธ์กันเกิดขึ้น เช่น ตารางกำหนดขนาดเป็น 500 pixel แต่เซลต่าง ๆ เรากำหนดเป็น 2 คอลัมน์คอลัมน์ละ 100 pixel 2 คอลัมน์รวมกันก็จะเท่ากันกับ 200 pixel เท่านั้น ถ้าเป็นดังนี้ Browser ของเราจะยึดเอาความกว้างของตารางเป็นหลักครับ นั้นคือ 500 pixel นั้นเอง
3. Cell ซึ่งอยู่ในแถวเดียวกันต้องมีความสูงเท่ากันเสมอ เราจะไม่สามารถกำหนดให้ cell ใด cell หนึ่งสูงกว่าเซลในแถวเดียวกันได้ ยกเว้นมีการรวมเซลเกิดขึ้นกับเซลข้าง ๆ และความกว้างของเซลก็ยึดหลักคล้ายคลึงกันนี้
4. บางครั้งตารางเองมักจะยืดออกไปตามขนาดของข้อมูลที่พิมพ์ลงไป คือ ไม่สามารถตัดคำได้บนโปรแกรม Dreamweaver แต่เมื่อเราทำการ Preview ดูกับ Browser ที่บราวเซอร์จะทำการตัดคำให้เราได้ ทั้งนี้ขึ้นอยู่กับชนิดของ Browser ว่าเป็นของอะไร
6. บางครั้งเราเห็นว่าในตารางไม่มีข้อมูลใดปรากฏอยู่เลยเมื่อสร้างตารางขึ้นมาใหม่ ๆ นั้นเป็นการเข้าใจผิด เพราะถ้าคุณเปิดดูที่ Source Code คุณจะเห็นรหัสการเว้นวรรคของ HTML ปรากฏอยู่ ( ) นั้นอาจจะเป็นสาเหตุหนึ่งที่ว่าทำไมบางครั้งเราไม่สามารถกำหนดขนาดความสูงของตารางเป็น 3-5 pixel ได้
5. การใช้ตารางให้ยึดการแสดงผลจากการชมด้วย Web Browser เป็นหลัก อย่ายึดการแสดงผลกับหน้าจอโปรแกรม Dreamweaver
** ทั้งหมดคือแนวคิดกว้าง ๆ ของการใช้งานตารางอย่างเข้าใจ เป็นข้อคิดเห็นจากประสบการณ์ครับ **
About the Author
Mr.Sittichai Raksasuk
Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs.
He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.
Contact with him : dwthai@gmail.com
บทความอื่นที่คุณอาจสนใจ
เรื่องสถานะของ Linkเรื่อง : สถานะของ Link ที่นักพัฒนาเว็บควรรู้และเข้าใจ
Link (ลิงค์) หรือจุดเชื่อมโยง เป็นเอกลักษณ์อย่างหนึ่...