ให้เรตสมาชิก: 0 / 5

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

              การกำหนดคุณลักษณะและการแบ่งส่วนตารางในภาษา HTML ได้แก่ การกำหนดหัวของตารางกำหนดด้วยแท็ก <th> และกำหนดขนาดเส้นของตารางใช้ แอตทริบิวต์ border และการกำหนดข้อความกำกับตารางแท็ก <caption> การแบ่งส่วนของตารางในภาษา HTML แบ่งเป็น 3 ส่วน คือ <thead> กำหนดส่วนหัวตาราง <tbody> กำหนดส่วนเนื้อหา <tfoot> กำหนดส่วนท้ายตาราง

 

arrow2 การกำหนดคุณลักษณะของตารางในภาษา HTML

               การกำหนดหัวของตารางกำหนดด้วยแท็ก <th> และกำหนดขนาดเส้นของตารางใช้ แอตทริบิวต์ border และการกำหนดข้อความกำกับตารางแท็ก <caption>

               การกำหนดหัวของตาราง

               การกำหนดหัวของตารางสามารถทำได้โดยใช้แท็ก​​​​​​​​​​​  <th>  ​​​​​​​​เป็นการ​กำหนดหัวสดมภ์จะกำหนดในสดมภ์แรกของตารางมีลักษณะเหมือนการกำหนดสดมภ์ด้วยแท็ก  ​​​​​​<td>​​​​​​  แต่จะแตกต่างตรงจะมีการกำหนดตัวหนาให้โดยอัตโนมัติ​​​​​​​​​​​​เพื่อให้ตารางมีการแยกข้อมูลอย่างชัดเจนสามารถกำหนดขนาดเส้นของตารางได้โดยการใช้แอตทริบิวต์  border  ซึ่งอยู่ภายใต้แท็กการกำหนดตาราง 

 

รูปแบบการใช้งาน

 <table border= “ขนาดของเส้นตาราง”>
<tr><th>หัวข้อ1</th><td>หัวข้อ2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

ตัวอย่าง

 <h3>ตารางเวรประจำวัน</h3>
<table border= “1”>
<tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
<td>เพ็ญศิริ</td></tr>
<tr><th>อังคาร</th><td>ภานุพงษ์</td><td>จิราพร</td>
<td>ธนัณชญา</td></tr>
<tr><th>พุธ</th><td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
<td>ฐาปนี</td></tr>
<tr><th>พฤหัสฯ</th>
<td>กษิดิศ</td><td>พัณณิตา</td>
<td>จารุพร</td></tr>
<tr><th>ศุกร์</th><td>ศุภวิชญ์</td>
<td>วรโชติ</td>
<td>ปรางค์ทอง</td></tr>
</table>

      table border th2

               การกำหนดข้อความกำกับตาราง

                การกำหนดข้อความกำกับให้กับตาราง ​​​​​​​​​​​​​​​ <caption>​​​​​​​​​​​​​  สามารถประยุกต์ใช้ในการกำหนดชื่อของตารางสามารถกำหนดตำแหน่งในการนำเสนอข้อความกำกับตารางได้ ด้วยแอตทริบิวต์  align  โดยค่าที่ใช้กำหนด  คือ  กำหนดข้อความที่ตำแหน่งตรงกลางด้านบน  (top)  กลางล่าง  (bottom)  บนซ้าย  (left)  บนขวา  (right)  ทั้งนี้การกำหนดแท็ก  <caption>  ต้องกำหนดภายใต้แท็ก  <table>  ซึ่งเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)

 

รูปแบบการใช้งาน

 <caption align=“top”>ตารางที่1 การแสดงข้อความกำกับ</caption>
<tr><th>หัวข้อ1</th><td>หัวข้อ2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

ตัวอย่าง

 <table border= “1”>
<caption align= “top”>ตารางเวรประจำวัน</caption>
<tr><th>จันทร์</th><td>ฉัตรชัย</td>
<td>ขนิษฐา</td><td>เพ็ญศิริ</td></tr>
<tr><th>อังคาร</th><td>ภานุพงษ์</td>
<td>จิราพร</td><td>ธนัณชญา</td></tr>
<tr><th>พุธ</th><td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
<td>ฐาปนี</td></tr>
<tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
<td>จารุพร</td></tr>
<tr><th>ศุกร์</th><td>ศุภวิชญ์</td><td>วรโชติ</td>
<td>ปรางค์ทอง</td></tr>
</table>

      table caption

 

arrow2 การแบ่งส่วนของตารางในภาษา HTML

               จากที่กล่าวไปแล้วเกี่ยวกับแท็ก  ​​​​​​​​​​​​​​​​​​​​​​​​​​​<th>​​​​​​​​​​​​​​  เป็นการกำหนดหัวสดมภ์เพื่อแสดงข้อมูลส่วนหัวและเป็นการเน้นข้อความให้มีความชัดเจนมากขึ้น  และมีแท็กที่สามารถช่วยในเรื่องการจัดการส่วนต่าง  ๆ  ของตารางได้  โดยการแบ่งส่วนของตารางออกเป็น  3  ส่วน  คือ  <thead>  มาจากคำว่า  “table header”  หมายถึง  ส่วนหัวของตาราง  <tbody>  มาจากคำว่า  “table body” หมายถึง ส่วนข้อมูลตาราง และ <tfoot>  มาจากคำว่า  “table footer”  หมายถึง  ส่วนของสรุปรวมข้อมูลในตาราง  โดยทั้ง  3  ส่วนนี้ไม่จำเป็นต้องกำหนดคุณลักษณะให้วางเรียงตามสัดส่วนอาจเรียงสลับก่อนหลังสามารถแสดงผลตามลำดับ

 

รูปแบบการใช้งาน

 <table>
<tfoot bgcolor= “ค่าสีRGB”> <tr><td>ส่วนท้ายตาราง</td><td>ส่วนท้ายตาราง</td></tr> </tfoot>
<thead bgcolor= “ค่าสีRGB”> <tr><td>ส่วนหัวตาราง</td> <td>ส่วนหัวตาราง</td> </tr> </thead>
<tbody bgcolor= “ค่าสีRGB”>
<tr><td>ส่วนข้อมูลตาราง</td>
<td>ส่วนข้อมูลตาราง</td></tr>
<tr><td>ส่วนข้อมูลตาราง</td>
<td>ส่วนข้อมูลตาราง</td></tr>
</tbody>
</table>

ตัวอย่าง

 <table>
<tfoot bgcolor= “#55FF55”>
<tr><td>ส่วนท้ายตาราง</td><td>ส่วนท้ายตาราง</td></tr>
</tfoot>
<thead bgcolor= “#000033”>
<tr><td>ส่วนหัวตาราง</td><td>ส่วนหัวตาราง</td></tr>
</thead>
<tbody bgcolor= “#005500”>
<tr><td>ส่วนข้อมูลตาราง</td><td>ส่วนข้อมูลตาราง</td></tr>
<tr><td>ส่วนข้อมูลตาราง</td><td>ส่วนข้อมูลตาราง</td></tr>
</tbody>
</table>

      table tfoot tbody thead