การค้นพบตาราง HTML อีกครั้ง

จากแนวทางปฏิบัติล่าสุดของฉันและหลังจากสื่อสารกับผู้อ่านบางคนเกี่ยวกับการใช้ตาราง HTML ฉันจึงตัดสินใจเขียนบทความนี้ โดยทั่วไป ฉันสังเกตเห็นว่าพวกเขามีความรังเกียจในการใช้ตารางเนื่องจากมีข้อมูลที่ทำให้เข้าใจผิด จริงๆ แล้วหลายคนจะพูดว่า "ฉันเห็นว่าตารางไม่ควรใช้" แต่นี่เป็นสิ่งที่ผิดอย่างแน่นอน! คำแนะนำนี้ใช้ได้กับการใช้ตาราง HTML เพื่อกำหนดเค้าโครงของเว็บเพจเท่านั้น แต่ตารางเหมาะสำหรับการจัดเรียงแถวและคอลัมน์ของข้อมูลได้อย่างสะดวก และหากคุณต้องแสดงข้อมูลแบบตารางบนเพจ คุณต้องใช้ข้อมูลเหล่านั้น! ทำไมไม่? อย่างไรก็ตาม ในกรณีนี้ บางคนเพิกเฉยต่อการมีอยู่ของแท็ก HTML บางตัวสำหรับตาราง และไม่รู้วิธีใช้อย่างถูกต้อง -

HTML มีแท็กที่เกี่ยวข้องกับตาราง 10 แท็ก ด้านล่างนี้เป็นรายการพร้อมคำแนะนำ แต่ก่อนอื่น เอกสารจะต้องถูกกำหนดอย่างถูกต้องภายใต้ HTML 4.01/XHTML 1 หรือ HTML 5:

• <caption> กำหนดชื่อตาราง (4, 5)
• <col> กำหนดคุณลักษณะสำหรับคอลัมน์ตาราง (4, 5)
• <colgroup> กำหนดการจัดกลุ่มของคอลัมน์ตาราง (4, 5)
• <table> กำหนดตาราง (4, 5)
• <tbody> กำหนดเนื้อหาของตาราง (4, 5)
• <td> กำหนดเซลล์ (4, 5)
• <tfoot> กำหนดเชิงอรรถ (ด้านล่าง) ของตาราง (4, 5)
• <th> กำหนดส่วนหัวของตาราง (4, 5)
• <thead> กำหนดส่วนหัวของตาราง (4, 5)
• <tr> กำหนดแถวของตาราง (4, 5)

โครงสร้างพื้นฐานของตารางมีดังนี้:

ประกอบด้วยชื่อเรื่อง ส่วนหัว เนื้อหา และส่วนท้าย ลำดับที่ถูกต้องขององค์ประกอบ HTML คือ:

1. <ตาราง>
2. <คำบรรยายภาพ>
3. <หัว>
4. <tเท้า>
5. <tbody>

คุณยังสามารถใช้ <col> และ <colgroup> เพื่อกำหนดคอลัมน์ของตารางหรือคอลัมน์กลุ่ม:

1. <ตาราง>
2. <คำบรรยายภาพ>
3. <คอลกรุ๊ป>
4. <คอล>
5. <หัว>
6. <tเท้า>
7. <tbody>