HTML таг thead

Пример

Кратък пример как се използва тагът <thead>.

<table class="table table-striped">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Име</th>
      <th scope="col">Имейл</th>
      <th scope="col">Роля</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Иван Иванов</td>
      <td>ivan@example.com</td>
      <td>Администратор</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Мария Петрова</td>
      <td>maria@example.com</td>
      <td>Редактор</td>
    </tr>
  </tbody>
</table>

Дефиниция и употреба

Тагът <thead> се използва в HTML таблици, за да групира редовете, които съдържат заглавията на колоните. Обикновено вътре в него има един или повече редове <tr>, а във всеки ред – клетки за заглавия <th>.

<thead> помага за по-добра семантика и достъпност: екранните четци и други помощни технологии разпознават кои клетки са заглавни и могат да ги свържат със съответните данни в <tbody>. Освен това улеснява стилизирането – например можете да приложите различен фон, удебелен шрифт или фиксиран хедър само върху заглавната част на таблицата.

Обикновено <thead> се използва заедно с <tbody> (основно съдържание на таблицата) и по желание с <tfoot> (обобщение или футър на таблицата). Редът на тези елементи в HTML кода е: <thead>, след това <tbody>, а накрая <tfoot>. Вътре в <thead> трябва да има само редове <tr>, а не директно клетки <th> или <td>.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути