ตารางใน html5

ใน html5 ได้ปรับปรุงโครงสร้างตารางให้สามารถอธิบายข้อมูลภายในได้มากขึ้น โดยมีโครงสร้าง[sourcecode language=”html”]<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>[/sourcecode]จะเห็นส่วนที่เพิ่มมาคือ

1. caption อธิบายรายละเอียดตาราง
2. th จะใช้แทน td ในกรณีที่เป็นหัวตารางทั้งคอลัมน์และแถว (ทำไมไม่ใช้สดมและแถว ?) จะมี scope Attribute โดยมีค่า
   • col = คอลัมน์
   • colgroup = กลุ่มคอลัมน์
   • row = แถว
   • rowgroup = กลุ่มของแถว

   ถ้าเป็นคอลัมน์ที่เป็นผลรวมของทั้งตารางละ ?

3. thead table tfoot คือ หัวตาราง เนื้อหา และท้ายตารางตามลำดับ

จะเห็นได้ว่าเป็นโครงสร้างที่สามารถอธิบายข้อมูลภายในได้มากกว่าเดิม น่าเสียดายที่ Adobe Dreamweaver ไม่ช่วยปรับพวก scope เวลารวมตารางต้องมาปรับเอง