Атрибут abbr тега <th> — коротка назва заголовка таблиці

HTML

<p class="head">1. Так виглядає таблиця з abbr — тобто ніяк</p>
<table>
  <caption>Показники за 2026 рік</caption>
  <tr>
    <th scope="col" abbr="ВВП">Валовий внутрішній продукт</th>
    <th scope="col" abbr="Індекс цін">Індекс споживчих цін</th>
  </tr>
  <tr><td>6,5 трлн грн</td><td>108,2 %</td></tr>
</table>
<p class="note">Обидва заголовки мають abbr, але тексту з нього ніде немає: він
   призначений читалкам екрана, а не очам.</p>

<p class="head">2. Та сама таблиця, і стилі виводять прихований текст</p>
<table class="pokazaty">
  <caption>Показники за 2026 рік</caption>
  <tr>
    <th scope="col" abbr="ВВП">Валовий внутрішній продукт</th>
    <th scope="col" abbr="Індекс цін">Індекс споживчих цін</th>
  </tr>
  <tr><td>6,5 трлн грн</td><td>108,2 %</td></tr>
</table>
<p class="note">Червоним дописано те, що лежить в атрибуті: правило
   th[abbr]::after { content: attr(abbr) }. Значить, текст у розмітці є —
   просто переглядач його не малює.</p>

<p class="head">3. Так це роблять сьогодні</p>
<table class="korotko">
  <caption>Показники за 2026 рік
    <span class="rozshyfrovka">ВВП — валовий внутрішній продукт; ІСЦ — індекс споживчих цін</span>
  </caption>
  <tr>
    <th scope="col"><abbr title="Валовий внутрішній продукт">ВВП</abbr></th>
    <th scope="col"><abbr title="Індекс споживчих цін">ІСЦ</abbr></th>
  </tr>
  <tr><td>6,5 трлн грн</td><td>108,2 %</td></tr>
</table>
<p class="note">Заголовок короткий сам собою, повна назва — у теґу abbr із title
   (наведіть курсор) і ще раз у підписі таблиці. Її бачать усі, а не лише читалка.</p>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}

caption {
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
}

td,
th {
    padding: 5px 10px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef3fb;
}

.pokazaty th[abbr]::after {
    content: " [" attr(abbr) "]";
    color: #c0392b;
    font-weight: 400;
}

.rozshyfrovka {
    display: block;
    margin-top: 2px;
    color: #5a6472;
    font-weight: 400;
    font-size: .85em;
}

.korotko th {
    text-align: center;
}

.note {
    max-width: 480px;
    margin: 6px 0 0;
    color: #5a6472;
    font-size: .9em;
}

<p>Приклад використання атрибута "abbr"</p> 
<table border="1" cellpadding="4">
  <caption>Інформація про автомобілі</caption>
   <tr>
    <th abbr="Компанія">Назва виробника</th>
    <th abbr="Модель">Назва моделі</th>
    <th abbr="Рік">Рік випуску</th>
   </tr>
   <tr>
    <td>Volkswagen</td>
    <td>Golf 2.8 GTi</td>
    <td>2007</td>
   </tr>
   <tr>
    <td>Volkswagen</td>
    <td>Polo</td>
    <td>2015</td>
   </tr>
  </table>