Thuộc tính abbr của TableHeader (th) trong HTML DOM

Thuộc tính abbr (viết tắt của abbreviation) của đối tượng HTMLTableHeaderCellElement (<th>) dùng để cung cấp **mô tả ngắn gọn / viết tắt** cho nội dung ô tiêu đề. Giá trị này **không hiển thị trực quan** trên trình duyệt thông thường, nhưng được **screen reader (đọc màn hình)** sử dụng để đọc ngắn gọn thay vì đọc toàn bộ tiêu đề dài — hỗ trợ accessibility (khả năng tiếp cận).

Cú pháp

// Lấy giá trị
var abbr = thElement.abbr;

// Đặt giá trị
thElement.abbr = "viết tắt";

Ví dụ: Sử dụng abbr cho tiêu đề cột dài

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; border-collapse: collapse; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }

<body>
  <h1>Demo: th.abbr</h1>
  <table border="2">
    <thead>
      <tr>
        <th>Họ và tên</th>
        <th abbr="NN" id="langCol">Ngoại ngữ chính</th>
      </tr>
    </thead>
    <tbody>
      <tr><td id="n1">An</td><td abbr="Eng" id="n1lang">Tiếng Anh</td></tr>
      <tr><td id="n2">Bình</td><td abbr="Jpn" id="n2lang">Tiếng Nhật</td></tr>
    </tbody>
  </table>
  <button onclick="showAbbr()" class="btn">Hiện abbr cột ngôn ngữ</button>
  <div class="show" id="result"></div>
  <script>
    function showAbbr() {
      document.getElementById('result').textContent = 'abbr của cột: ' + document.getElementById('langCol').abbr;
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hiển thị: abbr của cột: NN

Khi nào nên dùng abbr?

• Tiêu đề cột dài, phức tạp (ví dụ: "Tỷ lệ chuyển đổi khách hàng quý 3/2024" → abbr="CR Q3/24").
• Bảng dữ liệu lớn, screen reader đọc tiêu đề đầy đủ rất tốn thời gian.
• Tuân thủ WCAG 2.1 (Web Content Accessibility Guidelines).

Lưu ý: abbr cũng có thể dùng trên <td> (xem bài TableData abbr), nhưng phổ biến nhất trên <th>.