ใน HTML5 มีการส่งเสริมโครงสร้างตารางแบบ Semantic เพื่อให้อธิบายความหมายของข้อมูลภายในได้ชัดเจนยิ่งขึ้น ทั้งยังช่วยให้อุปกรณ์ช่วยอ่าน (Screen Reader) เข้าถึงข้อมูลได้อย่างถูกต้อง โดยมีโครงสร้างมาตรฐานดังนี้ครับ
XML
XML
<table border="1">
<caption>ตารางเงินเดือน</caption>
<thead>
<tr>
<th scope="col">ลำดับ</th>
<th scope="col">เดือน</th>
<th scope="col">รายได้</th>
<th scope="col">รวม</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>ม.ค.</td>
<td>10,000</td>
<td>10,000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ก.พ.</td>
<td>1,000</td>
<td>11,000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>มี.ค.</td>
<td>1,040</td>
<td>12,040</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3">รวมทั้งสิ้น</th>
<td>100,000</td>
</tr>
</tfoot>
</table>
ส่วนประกอบสำคัญที่ช่วยเพิ่มมิติการอธิบายข้อมูล ได้แก่
<caption>: ป้ายกำกับอธิบายชื่อหรือรายละเอียดของตาราง เพื่อให้ผู้ใช้ทราบทันทีว่าตารางนี้เกี่ยวกับอะไร<th>และแอตทริบิวต์scope: ใช้กำหนดหัวตารางแทน<td>ทั้งแนวนอนและแนวตั้ง โดยมีค่าใช้งานหลักดังนี้:col: หัวตารางของคอลัมน์นั้น ๆcolgroup: หัวตารางที่ครอบคลุมกลุ่มของคอลัมน์row: หัวตารางของแถวนั้น ๆrowgroup: หัวตารางที่ครอบคลุมกลุ่มของแถว
หมายเหตุ: กรณีช่องผลรวม หากเป็นหัวข้อสรุปประจำแถวใน
<tfoot>ให้ใช้<th scope="row">รวม</th>แล้วตามด้วยตัวเลขใน<td>ครับ (แอตทริบิวต์scopeมีผลเฉพาะแท็ก<th>)<thead>,<tbody>,<tfoot>: การแบ่งกลุ่มโครงสร้างเป็นส่วนหัวตาราง, เนื้อหาข้อมูล และสรุปผลท้ายตารางตามลำดับ ช่วยให้เบราว์เซอร์และ CSS จัดการการแสดงผลและการพิมพ์ (Print Style) ได้มีประสิทธิภาพยิ่งขึ้น
โครงสร้างนี้ช่วยให้ข้อมูลภายในตารางเป็น Semantic Web มากขึ้น ชัดเจนทั้งต่อ Search Engine และผู้ใช้งานที่ใช้เทคโนโลยีช่วยเหลือ (Accessibility) ครับ
อ่านเพิ่มเติม