ใช้ html5 table อย่างไรให้เหมาะสม ?

อย่าใช้ table สร้าง layout

การใช้ table ในการสร้าง layout นั้นเคยเป็นที่นิยมในอดีต แต่ในปัจจุบันกลับไม่เป็นที่นิยมเนื่องจากวิธีนี้มีข้อเสียในหลายๆ ด้านด้วยกัน

  • Accessibilitylayout ที่ใช้ table มักจะแสดงผลไม่ค่อยถูกต้องเมื่อดูด้วย screen reader
  • Maintainabilityการแก้ layout จะทำได้ค่อนข้างลำบาก เพราะต้องไปแก้ html ในทุกๆ หน้า
  • Flexibilityมีความยืดหยุ่นไม่มากนัก
  • Performancetable ใช้เวลาในการ render ค่อนข้างนาน เนื่องจาก algorithm มีความซับซ้อน ยิ่งมี tables หลายๆ อัน ซ้อนกัน ยิ่งทำให้ performance ลดลง
  • Printabilitylayout ที่สร้างด้วย table มักจะมีปัญหาในการ print
  • Semantic HTMLtable element ไม่ได้มีไว้สร้าง layout

จากสาเหตุดังกล่าว จึงได้เกิดแนวคิดที่เรียกกันว่า “Tableless” ขึ้นมา แนวคิดนี้จะหลีกเลี่ยงการใช้ table ในการสร้าง layout ของหน้าเว็บ แล้วหันมาใช้ css แทน

แล้วเมื่อไรเราควรจะใช้ table?

หลังจากที่แนวคิด tableless ได้รับความนิยมกันอย่างกว้างขวาง ทำให้หลายๆ คน เลิกใช้ table ไปโดยปริยาย ทั้งๆ ที่จริงๆ แล้ว การใช้ table ยังคงสามารถใช้ได้อยู่ เพียงแต่เราจะต้องเลือกใช้ให้มันเหมาะสมเท่านั้นเอง คำถามคือ เราควรจะใช้ table ในกรณีไหนบ้าง? คำตอบคือ เราจะใช้ table กับ “Tabular Data”

รู้จักกับ Tabular Data

Tabular Data คือข้อมูลที่มีมากกว่า 1 มิติ หรือพูดง่ายๆ คือข้อมูลที่สามารถแยกออกเป็น rows และ columns ได้ โดยปกติแล้ว เราจะใช้ tabular data เพื่อประโยชน์ดังนี้

  • ใช้เพื่อการตัดสินใจ
  • ใช้เพื่อการเปรียบเทียบ
  • ใช้เพื่อการวิเคราะห์

วิธีดูง่ายๆ ว่าอะไรเป็น tabular data ให้เราลองเอาข้อมูลนั้น ไปใส่ spreadsheet ดู ถ้ามันสมเหตุสมผลแล้วล่ะก็ ข้อมูลนั้นถือเป็น tabular data

IDEmployee NamePositionSalary
1ACEO100,000
2BManager50,000
3CWeb Designer20,000

ข้อมูลนี้เป็น Tabular Data

Header
Nav 

 

Content 

 

Sidebar 

 

Footer

ข้อมูลนี้ไม่เป็น Tabular Data

อย่าใช้ div หรือ li กับ Tabular Data

หลายๆ คน พยายามหลีกเลี่ยงการใช้ table แล้วหันมาใช้ div หรือ li แทน เนื่องจากมันมีความยืดหยุ่นมากกว่า บางคนอาจใช้ div แล้วกำหนด display:table แทนการใช้ table กำหนด display:table-row แทนการใช้ tr และกำหนด display:table-cell แทนการใช้ td

หากมองในแง่ของ semantic html แล้ว วิธีนี้ถือว่าไม่ค่อยจะเหมาะสมเท่าไรนัก วิธีที่ดีกว่าคือ เมื่อเราแยกแยะได้แล้วว่าข้อมูลนี้เป็น tabular data ให้เราใช้ table เสมอ และถ้าหากเราต้องการจะให้มันยืดหยุ่นขึ้นก็ค่อยใช้ css เข้ามาช่วย สามารถอ่านต่อได้ที่บทความ สอนวิธีทำ Responsive Table

(Visited 4,743 times, 1 visits today)

2 Responses to “ใช้ html5 table อย่างไรให้เหมาะสม ?”

  1. ขอบคุณครับ

  2. ขอบคุณครับ

Leave a Reply