คุณสมบัติ abbr คืออะไร?
คุณสมบัติ abbr (Abbreviation) ของเอลิเมนต์ <th> (Table Header Cell) ใช้ระบุ **คำย่อหรือคำอธิบายสั้นๆ** สำหรับหัวข้อคอลัมน์นั้นๆ ช่วยให้ **Screen Readers** อ่านคำอธิบายสั้นแทนข้อความเต็ม และช่วย **Search Heap** เข้าใจเนื้อหา
รูปแบบการใช้งาน (Syntax)
ใน HTML:
<th abbr="ย่อ">ข้อความเต็ม</th>
ใน JavaScript (DOM Property):
// อ่าน
var abbr = thElement.abbr;
// เขียน
thElement.abbr = "ย่อใหม่";
ตัวอย่าง: ตารางภาษาที่ใช้ abbr
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; width: 400px; }
th, td { border: 1px solid #333; padding: 8px; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
.show { font-size: 1.2rem; margin-top: 1rem; }
ความแตกต่าง: abbr บน <th> vs <td>
| เอลิเมนต์ |
รองรับ abbr |
วัตถุประสงค์ |
<th> | ✅ ใช่ (Standard) | คำอธิบายสั้นของหัวข้อคอลัมน์/แถว |
<td> | ❌ ไม่ใช่มาตรฐาน (แต่บราวเซอร์บางตัวรองรับ) | ไม่ควรใช้ - ใช้ title หรือ data-* แทน |
แนวทางปฏิบัติที่ดี
- ใช้
abbr บน <th> เมื่อหัวข้อคอลัมน์ยาวเกินไป (เช่น <th abbr="ยอดขาย">ยอดขายรวมประจำปี 2567</th>)
- คำย่อควร **สั้น กระชับ เข้าใจง่าย** (ไม่เกิน 10-15 ตัวอักษร)
- ช่วย **Accessibility** มากที่สุด: Screen Reader จะอ่าน abbr แทนข้อความเต็มเมื่อนำทางด้วยตาราง
- ไม่บังคับ แต่แนะนำให้ใช้ในตารางข้อมูลขนาดใหญ่หรือซับซ้อน
คุณสมบัติอื่นๆ ของ TableHeader (th)
| คุณสมบัติ |
คำอธิบาย |
cellIndex | ตำแหน่งเซลล์ในแถว (0-based, Read-only) |
colSpan | จำนวนคอลัมน์ที่ขยาย (อ่าน/เขียนได้) |
rowSpan | จำนวนแถวที่ขยาย (อ่าน/เขียนได้) |
headers | id ของ header cells ที่เกี่ยวข้อง (สำหรับ Accessibility) |
scope | ขอบเขตของ header: col, row, colgroup, rowgroup |
