table, tr, th, td (ตาราง โอ้วเยช!)

หลายคนกำลังรอคอยเรื่องการใช้ตารางแบบ xhtml อยู่ แต่ความแตกต่าง ระหว่าง html 4.0 กับ xhtml 1.0 มันก็ไม่มีอะไรมากมายนักหรอกครับ แต่ว่า เขาพัฒนาให้มันเฉพาะเจาะจงมากยิ่งขึ้นนั่นเอง เช่นว่า ตารางที่คุณกำลังเขียนนั้นเอาไว้ใช้กับข้อมูลอะไร ย้ำนะครับว่า เอาไว้แสดงผลข้อมูล ไม่ได้แสดงผลกราฟฟิคเลย์เอ้าท์

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

1. html ธรรมดา ที่คุ้นเคย

2. XHTML

ซึ่งสิ่งที่เพิ่มเข้ามามากกว่าตารางแบบ html ธรรมดาก็คือ summary, caption, th

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

Caption คือ หัวเรื่องของตารางนั่นเอง ใช้แทน colspan ของ td ในกรณีที่ตารางมี พาดหัว

Th คือ หัวข้อของแต่ละคอลัมน์ ครับ

ตารางไม่ใช่มีแค่นี้นะครับ ยังมีอีกเยอะ ไม่ว่าจะเป็น thead, tbody, tfoot แต่เป็นแอตทริบิ้วที่ไม่ค่อยนำมาใช้งาน เขาเลยไม่ได้เรียงลำดับความสำคัญเป็นเรื่องหลักๆ ครับ

ปล. ข้อมูลที่แสดงในตาราง ไม่ได้มีเจตนา อื่นใดแอบแฝงแต่อย่างใด ลูกกลมๆ อะไรก็เกิดได้ครับ บางวัน ปืนใหญ่ก็ห่วยเกินบรรยาย แต่ เจอหงษ์ แล้วไซร้ “เราชอบเป้าบินครับ”

Back to Top

12 Responses to table, tr, th, td (ตาราง โอ้วเยช!)

  1. เอก

    ชอบในความรู้ครับ แต่ไม่ปลื้มในตัวอย่างข้อมูล T T

    Reply

  2. พร

    น่านะ นานนาน จะได้ยิ้มอย่างนี้ซะที เดี๋ยวมันก็ไปตกม้าตายกับทีมเล็กๆ

    Reply

  3. โดม

    12 เม็ดขำ ๆ

    Reply

  4. goragod

    รู้สึกว่าข้อมูลจะลำเอียง

    Reply

  5. พร อันทะ

    เราพูดตามความเป็นจริง นะครับ ใช่มั้ยท่านโดม อิอิ น่านะ นินินอยนอย

    Reply

  6. spider

    แล้วใน xhtml แอทริบิวท์ ที่ใช้กับ table ยังคงใช้งานได้อย่างเดิมหรือเปล่าครับ พวก cellpadding, cellspacing หรือ border เนี่ย ผมว่าน่าจะมีบทความเกี่ยวกับพวก thead, tbody, tfoot ด้วยนะครับเพราะใน joomla ใช้บ่อยพอสมควรเลยอ่ะครับ

    Reply

  7. พร อันทะ

    สำหรับ cellpadding, cellspacing หรือ border ไม่สามารถเอามาใช้งานได้ครับ

    ให้ใช้คำสั่งจาก CSS ทั้งหมด

    นะ

    Reply

  8. พร

    เออ แต่ ท่านโดม

    เราโดนเอาคืนแล้วนี่

    โดนพี่คล้าว สอยคนเดียว 3 ลูก

    แพ้เขาซะ หมดรูปเลย

    Reply

  9. ผ่านมา

    ขออธิบายเพิ่มเติมเกี่ยวกับ summary ของตารางนิดหนึ่งนะครับ จริง ๆ แล้ว attribute ตัวนี้มีขึ้นมาก็เพราะเรื่อง Web Accessibility (เว็บที่ทุกคนเข้าถึง) ต้องบอกไว้ก่อนนิดหนึ่งนะครับว่า XHTML กับ CSS นั้นไปเกี่ยวกับเรื่อง Web Accessibility ของคนพิการด้วย เพราะว่าองค์กร W3C นั้นต้องการทำมาตรฐานเว็บที่ทุกคนเข้าถึงได้โดยใช้หลักการของ Universal Design (การออกแบบสำหรับทุกคน) เพราะฉะนั้น XHTML, CSS กับ Web Accessibility (ซึ่งอยู่ในรูปของ WCAG และ WAI) จึงเข้ามาเกี่ยวกันอย่างเลี่ยงไม่ได้

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

    จะทำ XHTML กับ CSS โดยละทิ้ง Web Accessibility ไม่ได้ครับ เพราะมันถูกพัฒนามาด้วยกัน ที่เมืองนอกเมืองนาเขาก็ไปกันไกลแล้วเรื่องนี้ จนกระทั่งบางประเทศมีกฎหมายบังคับ หรือบางบริษัทถูกคนพิการฟ้องเพราะทำเว็บที่เข้าถึงไม่ได้มาแล้ว แต่เมืองไทยจะมองคนพิการในฐานะที่เป็นพลเมืองชั้น 2 หรือแย่กว่านั้น อยากให้เราคำนึงถึงตรงนี้ด้วย เพราะความต้องการในการเข้าถึงข้อมูลข่าวสารนั้นเป็นความต้องการพื้นฐานของทุกคน

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

    Reply

  10. =Keith=

    อ้าว แรกๆก็ใช้อยู่หรอก th หลังๆไม่ค่อยได้ใช้ เพิ่งรู้นะเนี่ย มันต่างจริงๆ !! ฮ่าๆๆ

    Reply

  11. arm

    เยี่ยมเลยพี่ 1 สุดยอด คนพิการก้อคนเนอะ

     

     
    ใจเขาใจเราดีดีสุ้ๆครับ

    Reply

  12. Luckyo

    ขอบคุณความรู้ พี่ๆๆ ทุกท่านครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top