Bootstrap - Таблицы: Доброжелательное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир таблиц Bootstrap. Не волнуйтесь, если вы раньше не писали кода – я буду вашим доброжелательным проводником в этом путешествии, и мы будем двигаться шаг за шагом. К концу этого руководства вы будете создавать красивые, отзывчивые таблицы, как профессионал!

Что такое таблицы Bootstrap?

Прежде чем мы начнем, давайте поговорим о том, что такое таблицы Bootstrap. Представьте, что вы организовываете свои любимые книги на полке. Таблицы Bootstrap resemble того полки, но для вашего веб-сайта! Они помогают вам представить информацию в аккуратном, организованном виде, который легко читается и понимается вашими посетителями.

Простая таблица

Давайте начнем с основ. Вот как создать простую таблицу Bootstrap:

<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
<th>Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

Этот код создает таблицу с тремя колонками: Имя, Возраст и Город. Раздел <thead> определяет заголовки таблицы, а <tbody> содержитactual данные. Класс class="table" добавляет магию Bootstrap!

Варианты таблиц

Bootstrap предлагает различные стили для ваших таблиц. Это как выбирать разные наряды для ваших данных! Вот некоторые варианты:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Просто добавьте эти классы к тегу <table>, чтобы изменить общий вид вашей таблицы. Это так просто!

Подчеркнутые таблицы

Хотите сделать определенные строки или ячейки более заметными? Bootstrap вам поможет:

<table class="table">
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Активная строка</td>
<td>Выделяется</td>
</tr>
<tr>
<td>Обычная строка</td>
<td class="table-primary">Подчеркнутая ячейка</td>
</tr>
</tbody>
</table>

Класс table-active подчеркивает целую строку, а классы, такие как table-primary, можно использовать на отдельных ячейках.

Полосатые строки и колонки

помните те зебровые тетради, которые у вас были в школе? Вы можете сделать то же самое со своими таблицами!

Для полосатых строк:

<table class="table table-striped">
...
</table>

И для полосатых колонок:

<table class="table table-striped-columns">
...
</table>

Строки с эффектом hover

Хотите сделать таблицу интерактивной? Сделайте строки светящимися при наведении курсора:

<table class="table table-hover">
...
</table>

Это как магия – попробуйте это сами!

Таблицы с границами и без границ

Вы можете добавить границы к вашей таблице:

<table class="table table-bordered">
...
</table>

Или удалить их полностью:

<table class="table table-borderless">
...
</table>

Мелкие таблицы

Для более compactного вида используйте класс table-sm:

<table class="table table-sm">
...
</table>

Это идеально для тех случаев, когда вам нужно поместить много данных в малом пространстве!

Разделители групп таблиц

Хотите分组 данные? Используйте класс table-group-divider:

<table class="table">
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Данные 3</td>
<td>Данные 4</td>
</tr>
</tbody>
</table>

Это добавляет видимый разделитель между группами тела таблицы.

Вертикальное выравнивание

Вы можете контролировать, как содержимое выравнивается вертикально внутри ячеек:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Эта ячейка и ее соседи выровнены по низу</td>
<td>Низ</td>
<td class="align-top">Эта ячейка выровнена по верху</td>
</tr>
</tbody>
</table>

Используйте align-middle для выравнивания по середине и align-top для выравнивания по верху.

Отзывчивые таблицы

Сделайте ваши таблицы хорошо выглядящими на всех устройствах с помощью класса table-responsive:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Это позволяет вашей таблице прокручиваться горизонтально на малых экранах. Это как дать вашей таблице суперсилы, чтобы адаптироваться к любому размеру экрана!

Вложенные таблицы

Вы можете даже placing таблицы внутри таблиц! Вот как:

<table class="table table-striped">
<thead>
<tr>
<th>Имя</th>
<th>Подробности</th>
</tr>
</thead>
<tbody>
<tr>
<td>Родительская строка</td>
<td>
<table class="table table-sm">
<tr>
<td>Вложенная строка 1</td>
</tr>
<tr>
<td>Вложенная строка 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Это как русские матрешки, но с таблицами!

Анатомия таблицы

Давайте разберем части таблицы:

Заголовок таблицы

<table class="table">
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
...
</table>

Раздел <thead> содержит ваши заголовки столбцов.

Ножка таблицы

<table class="table">
...
<tfoot>
<tr>
<td>Подвал 1</td>
<td>Подвал 2</td>
</tr>
</tfoot>
</table>

Используйте <tfoot> для подвала таблицы, который идеально подходит для summaries или totales.

Заголовок таблицы

Добавьте заголовок к вашей таблице с помощью <caption>:

<table class="table">
<caption>Список пользователей</caption>
...
</table>

Это как дать вашей таблице бейджик с именем!

Заключение

И вот оно,folks! Вы только что научились создавать и стилизовать таблицы с помощью Bootstrap. Помните, что практика делает perfect, так что не стесняйтесь экспериментировать с различными комбинациями этих классов. Before you know it, вы будете создавать таблицы, которые не только эффективно организовывают данные, но и выглядят потрясающе!

Счастливо кодируйте, и пусть ваши таблицы всегда будут beautifully bootstrapped!

Credits: Image by storyset