Таблицы

Обычная HTML-таблица из учебника выглядит голо: ни отступов, ни линий. Класс table на теге <table> сразу даёт ей отступы в ячейках и тонкие разделители строк, а дополнительные классы — полосы, подсветку и рамки. Для админ-панели таблица — главный способ показать список заказов или пользователей.

Базовая таблица

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<table class="table">
  <thead>
    <tr><th>#</th><th>Клиент</th><th>Тариф</th><th>Сумма</th></tr>
  </thead>
  <tbody>
    <tr><td>101</td><td>Анна Смирнова</td><td>Командный</td><td>$90</td></tr>
    <tr><td>102</td><td>Олег Петров</td><td>Бесплатный</td><td>$0</td></tr>
    <tr><td>103</td><td>Мария Ким</td><td>Командный</td><td>$45</td></tr>
  </tbody>
</table>

Таблица заказов на всю ширину: жирная шапка, отступы в ячейках и линии между строками.

Варианты оформления

Классы добавляют к table, их можно сочетать:

Класс	Что делает
`table-striped`	Чередует фон строк
`table-hover`	Подсвечивает строку под курсором
`table-bordered`	Рамки у всех ячеек
`table-borderless`	Без линий
`table-sm`	Компактная: отступы в ячейках вдвое меньше
`align-middle`	Содержимое ячеек по центру высоты

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<table class="table table-striped table-hover table-sm">
  <thead class="table-light">
    <tr><th>Пользователь</th><th>Задач</th><th>Статус</th></tr>
  </thead>
  <tbody>
    <tr><td>Анна</td><td>12</td><td>Активна</td></tr>
    <tr class="table-warning"><td>Олег</td><td>3</td><td>Нет оплаты</td></tr>
    <tr><td>Мария</td><td>8</td><td>Активна</td></tr>
  </tbody>
</table>

Полосатая компактная таблица со светло-серой шапкой; строка Олега жёлтая, а строка под курсором подсвечивается.

Цветные строки и ячейки

Классы table-{цвет} красят строку <tr> или отдельную ячейку: table-danger — для просроченного, table-success — для оплаченного. Вся таблица может быть тёмной: table table-dark.

Прокрутка на телефоне

Широкая таблица не помещается на узком экране. Оберните её в table-responsive — появится горизонтальная прокрутка внутри блока, а страница не поедет вбок:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="table-responsive">
  <table class="table text-nowrap">
    <thead>
      <tr><th>#</th><th>Клиент</th><th>Email</th><th>Тариф</th><th>Дата оплаты</th><th>Сумма</th></tr>
    </thead>
    <tbody>
      <tr><td>101</td><td>Анна Смирнова</td><td>anna@example.com</td><td>Командный</td><td>02.10.2026</td><td>$90</td></tr>
    </tbody>
  </table>
</div>

Сузьте окно — у таблицы появится своя полоса прокрутки. Класс text-nowrap запрещает перенос текста в ячейках.

Частая ошибка

Поставить table-responsive на сам тег <table>. Класс работает только на обёртке-div вокруг таблицы: прокрутку добавляет именно она. Если таблица на телефоне всё равно вылезает за экран, проверьте, что обёртка есть.

Спасибо, что читаете!