Создание таблицы
Использование таблиц для верстки сайтов не всегда оправдано, но для отображения табличных данных (например, описания товаров) тег <table> остаётся удобным инструментом.
Создадим простую таблицу с информацией о людях: имя, номер телефона и почта. В коде используется тег <table> с заголовками (<thead>) и телом (<tbody>), содержащим данные о трёх людях: Василии, Мише и Пете. Без стилей Bootstrap таблица выглядит неаккуратно.
Добавление стилей Bootstrap и дополнительные стили
Для улучшения внешнего вида таблицы, к основному тегу <table> добавляется класс table. Bootstrap автоматически применяет стили, делая таблицу более привлекательной и адаптивной. Доступны дополнительные классы:
- table-striped: Чередование цветов фона строк.
- table-hover: Подсветка строки при наведении курсора.
- table-bordered: Добавление границ вокруг ячеек.
- table-condensed: Уменьшение отступов для компактного отображения.
Стили для строк и ячеек и адаптивность таблиц
Классы active, success, info, warning и danger применяются к тегам <tr> (строка) и <td> (ячейка) для выделения цветом:
- active: Серый фон (аналогичный table-hover).
- success: Зеленый фон.
- info: Синий фон.
- warning: Желтый фон.
- danger: Красный фон.
Для адаптивности на разных экранах, класс table-responsive применяется не к таблице, а к её родителю (например, <div>). Адаптивность активируется при ширине экрана меньше 768 пикселей, позволяя прокручивать таблицу на мобильных устройствах.
Bootstrap упрощает создание и стилизацию табличных данных. Широкий набор классов позволяет настроить внешний вид и обеспечить адаптивность под разные размеры экранов. Таблицы остаются полезным инструментом для отображения структурированной информации.