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 місяця

Також варто подивитися