itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #5 - Работа с таблицами в Bootstrap

#5 - Работа с таблицами в Bootstrap

Таблицы делать долго и скучно, а добавлять к ним стили ещё хуже. За счёт фреймворка Bootstrap можно воспользоваться набором готовых стилей для красивого оформления таблиц. В уроке мы научимся использовать готовые стили к таблицам.

Видеоурок

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Работа с таблицами

Создайте адаптивную таблицу со стилями как на фото:

Посмотреть ответ

Решение задания:

<div class="table-responsive container">
	<table class="table table-hover">
		<thead>
			<tr>
				<th>Сайт</th>
				<th>Домен</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td class="success">Программирование</td>
				<td class="info"><a href="https://itproger.com">https://itproger.com</a></td>
			</tr>
			<tr>
				<td class="warning">Информационное агенство</td>
				<td><a href="http://plurrimi.com">http://plurrimi.com</a></td>
			</tr>
			<tr>
				<td class="warning">Поисковая система</td>
				<td><a href="https://google.com">https://google.com</a></td>
			</tr>
		</tbody>
	</table>
</div>

Большое задание по курсу

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

Bootstrap

HTML5