แบ่งส่วนตาราง <thead>, <tfoot>, <tbody>

การแบ่งส่วนตาราง <thead>, <tfoot>, <tbody>

        ในการแสดงผลข้อมูลในตาราง ส่วนใหญ่คือส่วนของข้อมูลและส่วนหัวที่จะแสดงความหมายของข้อมูล ซึ่งส่วนหัวจะต้องอยู่ด้านบนของตารางที่ใช้แท็ก th ดังที่เรียนไปแล้ว

        แต่เราสามารถแบ่งส่วนตารางออกเป็น 3 ส่วน ได้ดังนี้

        โดยทั้งสามส่วนเราไม่ต้องเรียงลำดับกันก็ได้ แต่ตอนแสดงผลบราวเซอร์จะเรียงลำดับการแสดงผลตามแท็กthead,tbodyและtfoot เช่น อาจวางแท็ก tfoot มาก่อนแท็ก tbody แต่เมื่อแสดงผลแท็กtbody ก็ถูกแสดงก่อน        แท็ก tfoot เหมือนเดิม

ลักษณะของแท็กทั้ง 3 ประเภทจะเป็นดังนี้

ชื่อแท็ก

thead, tbody และ tfoot

ตำแหน่งของแท็ก  

รูปแบบใน HTML

อยู่ภายในแท็ก < table>.....</ table >

<thead> <tr> <td>…</td> </tr> </thead>

<tbody> <tr> <td>…</td> </tr> </tbody>

<tfoot> <tr> <td>…</td> </tr> </tfoot>

ตัวอย่างการใช้งาน

<table border="1" width="300">

<tbody bgcolor="red">

   <tr> <td> body1 </td> <td> body2 </td> </tr>

   <tr> <td> body3 </td> <td> body4 </td> </tr>

</tbody>

<tfoot bgcolor="green">

   <tr> <td> foot1 </td>  <td> foot2 </td> </tr>

</tfoot>

<thead bgcolor="blue">

    <tr> <td> head1 </td> <td> head2 </td> </tr>

</thead>

</table>

  

ผลลัพธ์ที่ได้ 

        จะเห็นว่าแม้เราพิมพ์ชุดคำสั่งโดยไม่เรียงลำดับแท็ก แต่เวลาแสดงผลบนบราวเซอร์ ก็จะเรียงลำดับการแสดงผล        ตาม thead,tbody,tfoot อยู่ดีการแบ่งตารางออกเป็นส่วนทำให้สะดวกต่อการกำหนดรูปแบบของตาราง เช่น กำหนด    ขนาดตัวอักษร สีตัวอักษร สีพื้นหลังแค่ครั้งเดียว ก็จะทำให้ข้อมูลในส่วนนั้นทั้งหมดถูกจัดรูปแบบไปด้วย