Атрибут abbr тега <td> — скорочений опис вмісту комірки

<p>Приклад використання атрибута "abbr"</p> 
<table border="1" cellpadding="4">
  <caption>Інформація про автомобілі</caption>
   <tr>
    <td abbr="Компанія">Назва виробника</td>
    <td abbr="Модель">Назва моделі</td>
    <td abbr="Рік">Рік випуску</td>
   </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>

HTML

<p class="head">1. Атрибут є, і його не видно</p>
<table>
    <caption>Населення міст</caption>
    <tr>
        <th abbr="Місто" scope="col">Назва населеного пункту</th>
        <th abbr="2021" scope="col">Кількість населення станом на 2021 рік</th>
    </tr>
    <tr><td abbr="Київ">місто Київ</td><td>2 952 000</td></tr>
    <tr><td abbr="Львів">місто Львів</td><td>717 000</td></tr>
</table>

<p class="head">2. Те саме, але вміст атрибута показано правилом</p>
<table class="reveal">
    <caption>Населення міст</caption>
    <tr>
        <th abbr="Місто" scope="col">Назва населеного пункту</th>
        <th abbr="2021" scope="col">Кількість населення станом на 2021 рік</th>
    </tr>
    <tr><td abbr="Київ">місто Київ</td><td>2 952 000</td></tr>
    <tr><td abbr="Львів">місто Львів</td><td>717 000</td></tr>
</table>

<p class="head">3. А ось теґ, який шукають найчастіше</p>
<p>Наведіть на скорочення: <abbr title="Мова розмітки гіпертексту">HTML</abbr> —
    браузер підкреслив його пунктиром і покаже підказку.
    А <abbr>таке саме скорочення без title</abbr> не робить нічого.</p>

CSS

p {
    margin: 12px 0;
    max-width: 560px;
}

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

table {
    margin-bottom: 10px;
    border-collapse: collapse;
}

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

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

th {
    background: #eef3fb;
}

.reveal td::after,
.reveal th::after {
    color: #1b4f9c;
    font-family: ui-monospace, monospace;
    font-size: .8em;
    content: " [abbr=" attr(abbr) "]";
}

.reveal td:not([abbr])::after,
.reveal th:not([abbr])::after {
    color: #c0392b;
    content: " [abbr немає]";
}