Атрибут summary тега <table> — опис таблиці для читалок

HTML

<table summary="Населення двох міст за переписами 2001 і 2021 років. Перший стовпець — місто, далі два стовпці років.">
  <tr><th scope="col">Місто</th><th scope="col">2001</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 611 000</td><td>2 952 000</td></tr>
  <tr><th scope="row">Львів</th><td>725 000</td><td>717 000</td></tr>
</table>
<p class="note bad">Угорі таблиця з атрибутом summary. Тексту не видно ніде — і не буде:
   атрибут невидимий за задумом, а зі стандарту його прибрали.</p>

<table>
  <caption>Населення двох міст за переписами 2001 і 2021 років</caption>
  <tr><th scope="col">Місто</th><th scope="col">2001</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 611 000</td><td>2 952 000</td></tr>
  <tr><th scope="row">Львів</th><td>725 000</td><td>717 000</td></tr>
</table>
<p class="note good">Той самий текст у caption — його бачать усі.</p>

<table>
  <caption>Населення двох міст
    <details><summary>Докладніше про джерела</summary>
      Дані Держстату за переписами 2001 і 2021 років. Значення округлено до тисяч;
      межі міст узято станом на рік перепису.</details>
  </caption>
  <tr><th scope="col">Місто</th><th scope="col">2001</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 611 000</td><td>2 952 000</td></tr>
</table>
<p class="note good">Довгий опис — розкривним блоком просто в підписі.</p>

<details class="okremo">
  <summary>А це сам теґ summary, без жодної таблиці</summary>
  Ось вміст, який він відкриває. Теґ видимий, на нього клацають — з атрибутом
  summary в теґу table його ріднить тільки назва.
</details>

CSS

table {
    width: 100%;
    max-width: 460px;
    margin-bottom: 4px;
    border-collapse: collapse;
}

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

caption details {
    margin-top: 4px;
    font-weight: 400;
    font-size: .9em;
}

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

th {
    background: #eef3fb;
}

.note {
    max-width: 460px;
    margin: 0 0 24px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: .9em;
}

.bad {
    background: #fff4f4;
    color: #c0392b;
}

.good {
    background: #f3fbf4;
    color: #1b5e20;
}

.okremo {
    max-width: 460px;
    padding: 8px 10px;
    border: 2px solid #2f6fd0;
    border-radius: 6px;
    background: #f6f9ff;
}

.okremo summary {
    font-weight: 600;
    cursor: pointer;
}

<table id = "table" border="2" cols="3" summary="Графік роботи магазину">
  <caption><p>Приклад використання summary</p><hr>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td>Понеділок</td>
  <td>8:00 - 16:00</td>
  <td>12:00 - 13:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td>Середа</td>
  <td>11:00 - 19:00</td>
  <td>15:00 - 16:00</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td>П'ятниця</td>
  <td>9:00 - 13:00</td>
  <td>12:00 - 13:30</td>
</tr> 
</table>