Tag Archive table

ใน html5 ได้ปรับปรุงโครงสร้างตารางให้สามารถอธิบายข้อมูลภายในได้มากขึ้น โดยมีโครงสร้าง

<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>

จะเห็นส่วนที่เพิ่มมาคือ

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

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

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

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