Таблицы
Настройка
Основной класс: .table
Состояния: .is-bordered, .is-striped, .is-unstyled
Скачать CSS фрагмент компонента Собрать сборку CSS
Примеры
Фамилия |
Имя |
Баллы |
Петров |
Сергей |
1 |
Иванов |
Андрей |
2 |
Итого баллов |
3 |
<table class="table">
<thead>
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>Баллы</th>
</tr>
</thead>
<tbody>
<tr>
<td>Петров</td>
<td>Сергей</td>
<td>1</td>
</tr>
<tr>
<td>Иванов</td>
<td>Андрей</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Итого баллов</td>
<td>3</td>
</tr>
</tfoot>
</table>
Бордюры
Фамилия |
Имя |
Баллы |
Петров |
Сергей |
1 |
Иванов |
Андрей |
2 |
Итого баллов |
3 |
<table class="table is-bordered">...</table>
Зебра
Фамилия |
Имя |
Баллы |
Петров |
Сергей |
1 |
Иванов |
Андрей |
2 |
Итого баллов |
3 |
<table class="table is-striped">...</table>
Без стиля
Фамилия |
Имя |
Баллы |
Петров |
Сергей |
1 |
Иванов |
Андрей |
2 |
Итого баллов |
3 |
<table class="table is-unstyled">...</table>
Рамки
Фамилия |
Имя |
Отчество |
Возраст |
Баллы |
Рейтинг |
Петров |
Сергей |
Александрович |
21 |
1 |
100 |
Иванов |
Андрей |
Александрович |
25 |
2 |
95 |
Итого баллов |
3 |
<table class="table is-bordered">
<tr>
<td>...</td>
<td>...</td>
<td class="is-10">...</td>
</tr>
</table>