ใน html5 ได้ปรับปรุงโครงสร้างตารางให้สามารถอธิบายข้อมูลภายในได้มากขึ้น โดยมีโครงสร้าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <table border="1"> <caption> ตารางเงินเดือน </caption> <thead> <tr> <th scope="cal">เดือนที่</th> <th scope="cal">เดือน</th> <th scope="cal">รายได้</th> <th scope="cal">รวม</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> <td colspan="3">รวม</td> <td scope="cal">100,000</td> </tr> </tfoot></table> |
จะเห็นส่วนที่เพิ่มมาคือ
- caption อธิบายรายละเอียดตาราง
- th จะใช้แทน td ในกรณีที่เป็นหัวตารางทั้งคอลัมน์และแถว (ทำไมไม่ใช้สดมและแถว ?) จะมี scope Attribute โดยมีค่า
- col = คอลัมน์
- colgroup = กลุ่มคอลัมน์
- row = แถว
- rowgroup = กลุ่มของแถว
ถ้าเป็นคอลัมน์ที่เป็นผลรวมของทั้งตารางละ ?
- thead table tfoot คือ หัวตาราง เนื้อหา และท้ายตารางตามลำดับ
จะเห็นได้ว่าเป็นโครงสร้างที่สามารถอธิบายข้อมูลภายในได้มากกว่าเดิม น่าเสียดายที่ Adobe Dreamweaver ไม่ช่วยปรับพวก scope เวลารวมตารางต้องมาปรับเอง