เมธอด createCaption() คืออะไร?
เมธอด createCaption() ของออบเจ็กต์ตาราง (HTMLTableElement) ใช้ **สร้างเอลิเมนต์ <caption> ว่าง** และเพิ่มเข้าไปในตาราง (วางด้านบนสุดของตาราง เป็นลูกแรกของ <table>) หากตารางมี <caption> อยู่แล้ว จะคืนค่า caption เดิม (ไม่สร้างใหม่)
รูปแบบการใช้งาน (Syntax)
tableElement.createCaption()
คืนค่า: HTMLTableCaptionElement (เอลิเมนต์ caption ที่สร้างหรือมีอยู่แล้ว)
ตัวอย่าง: สร้าง Caption
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px; }
caption { color: #db133a; font-weight: bold; font-size: 1.2rem; padding: 0.5rem; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
คุณสมบัติ captionSide (CSS)
| ค่า | คำอธิบาย |
|---|---|
top | วาง caption ด้านบนตาราง (ค่าเริ่มต้น) |
bottom | วาง caption ด้านล่างตาราง |
การใช้งานร่วมกับ deleteCaption()
function toggleCaption() {
var table = document.querySelector('table');
if (table.caption) {
table.deleteCaption(); // ลบถ้ามี
} else {
var cap = table.createCaption();
cap.innerHTML = 'คำอธิบายใหม่';
}
}
คุณสมบัติ table.caption
เข้าถึง caption ปัจจุบันได้โดยตรง:
var caption = table.caption; // HTMLTableCaptionElement หรือ null
if (caption) {
caption.textContent = 'อัปเดตคำอธิบาย';
}
ความสำคัญของ <caption> ต่อ Accessibility และ SEO
- Screen Readers: อ่าน caption ก่อนเข้าเนื้อหาตาราง ช่วยให้ผู้ใช้พิการสายตาเข้าใจบริบท
- SEO: Search engines ใช้ caption เข้าใจหัวข้อตาราง
- Best Practice: **ทุกตารางข้อมูลควรมี
<caption>** ที่อธิบายเนื้อหาสั้นๆ
เมธอดจัดการส่วนของตาราง (สรุป)
| ส่วน | สร้าง (Create) | ลบ (Delete) |
|---|---|---|
<caption> | createCaption() | deleteCaption() |
<thead> | createTHead() | deleteTHead() |
<tfoot> | createTFoot() | deleteTFoot() |
ข้อควรระวัง
createCaption()สร้าง<caption>**ว่างเปล่า** ต้องตั้งค่าinnerHTMLหรือtextContentเอง- มีได้สูงสุด **1
<caption>ต่อตาราง** (HTML Standard) - วางตำแหน่งอัตโนมัติ: เป็น **ลูกแรกของ
<table>** - ใช้ CSS
caption-sideควบคุมตำแหน่งแสดงผล (top/bottom)
