:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 แบบทดสอบก่อนเรียน
เริ่มสร้างตาราง
 การปรับขนาดตาราง
 การกำหนดความกว้างของคอลัมน์
 การใส่หัวเรื่องให้กับตาราง
 การใส่ข้อความกำกับตาราง
 การกำหนดระยะห่างของช่องเซลล์
 การผสานเซลล์
 การใส่พื้นหลังให้กับตาราง
 การจัดตำแหน่งตารางและข้อมูล
 การใส่รูปภาพในตาราง
 การแบ่งส่วนตาราง
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 6 การสร้างตาราง (Table)
การใส่ข้อความกำกับตาราง


การใส่ข้อความกำกับตาราง

การใส่ข้อความกำกับให้กับตาราง จะช่วยให้รู้ว่า ตารางนั้น แสดงข้อมูลเกี่ยวกับอะไร และเราสามารถกำหนดตำแหน่งแสดงข้อความกำกับตารางได้ โดยมีรูปแบบดังนี้ี้

Tag
ชื่อแท็ก caption
ตำแหน่งแท็ก อยู่ในแท็กเปิด <table>...</table>
รูปแบบการใช้แท็ก <caption>ข้อความ</caption>

 


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


<table border="1" width="300">
    <caption>ข้อความกำกับตาราง</caption>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
</table>


</body>

การแสดงผล

จากตัวอย่างจะเห็นได้ว่าข้อความกำกับตารางจะปรากฏอยู่ด้านบ้านของตารางรางและอยู่กึ่งกลางของตาราง

 

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

ข้อความที่ใช้ในการกำกับหรืออธิบายตารางเราสามารถกำหนดตำแหน่งได้ด้วยแอททริบิวต์ align

Attribute
ชื่อแอททริบิวท์ align
ตำแหน่งแท็ก อยู่ในแท็กเปิด <caption>
รูปแบบการใช้แท็ก <caption alignt="value">... </caption>
value ตำแหน่งของข้อความกำกับ ได้แก่ top (กลางบน), bottom (กลางล่าง), left (ซ้ายบน), right (ขวาบน)

ตัวอย่างการใช้งาน
<body >
<table border="1" width="300">
    <caption align="bottom">ข้อความกำกับตาราง</caption>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
    <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>
</table>

</body>

การแสดงผล

จากตัวอย่างจะเห็นได้ว่าข้อความกำกับตารางจะเปลี่ยนตำแหน่งลงมาอยู่ด้านล่างของตารางตามที่กำหนดใน align


วีดีโอ