HTML таг table

Пример

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

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

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

Виж как се ползва тагът <table>.

HTML елементът <table> се използва за представяне на таблични данни – информация, организирана в редове и колони. Вътре в него обикновено се използват следните елементи:

• <tr> – дефинира ред в таблицата (table row);
• <th> – дефинира клетка заглавие (table header cell), обикновено в <thead>;
• <td> – дефинира стандартна клетка с данни (table data cell);
• <thead> – групира редовете с заглавия на колоните;
• <tbody> – групира основното съдържание на таблицата;
• <tfoot> – групира редовете в долната част (напр. обобщения, тотали);
• <caption> – добавя заглавие/описание на таблицата.

Таблицата се изгражда, като първо се създаде елемент <table>, след което вътре се добавят редове с <tr>, а във всеки ред – клетки с <th> или <td>. За по-добра семантика и достъпност се препоръчва използването на <thead>, <tbody> и <tfoot>, както и добавяне на <caption>, когато е нужно да се опише съдържанието на таблицата.

При използване с Bootstrap 5.3 към елемента <table> могат да се добавят класове като .table, .table-striped, .table-bordered, .table-hover и др., за да се приложи готов стил и по-добра визуализация на табличните данни.

Browser Support

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

Атрибути