Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Основи комп’ютерної графіки та Web-дизайну›
- Створення списків і таблиць
Урок:
Створення списків і таблиць
15.01.2025
Вміст уроку:
1
2
1
Список — скінченна послідовність однорідних об'єктів, що називаються елементами списку, яка містить хоча б один такий об'єкт.
У HTML можна визначити два типи списків:
Впорядковані списки – у яких порядок елементів списку має значення
Невпорядковані списки – у яких порядок елементів списку не є особливо важливим.
Властивості CSS списку дозволяють:
Встановити різні маркери елементів списку для впорядкованих списків;
Встановити різні маркери елементів списку для невпорядкованих списків;
Встановити зображення як маркер елемента списку;
Додати кольори фону в списки та елементи списку.
Невпорядкований (ненумерований) список починається з тега <ul>. Кожний елемент списку починається з тега <li>.
Елементи списку будуть помічені маркерами (маленькі чорні кола) за замовчуванням:
Приклад:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Вибір маркера елемента невпорядкованого списка.
CSS властивість list-style-type використовується для визначення стиля маркера елемента списку:
Значення | Опис |
disc | Встановлює маркер елемента списка як маленьке чорне коло (за замовчуванням) |
circle | Встановлює маркер елемента списка у вигляді маленького пустого кола |
square | Встановлює маркер елемента списка у вигляді квадрата |
none | Елементи списка не будуть відмічені (маркери відсутні) |
Приклад – Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Приклад – Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Приклад – Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Приклад – None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Впорядкований (нумерований) список починається з тега <ol>. Кожний елемент списку починається з тега <li>.
Елементи списку будуть помічені номерами за замовчуванням:
Приклад
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Атрибут type тега <ol> визначає тип маркера елемента списка:
Тип | Опис |
type="1" | Елементи списка будуть пронумеровані цифрами (за замовчуванням) |
type="A" | Елементи списка будуть пронумеровані великими літерами |
type="a" | Елементи списка будуть пронумеровані рядковими літерами |
type="I" | Елементи списка будуть пронумеровані великими римськими цифрами |
type="i" | Елементи списка будуть пронумеровані маленькими римськими цифрами |
Цифри:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Великі літери:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Рядкові літери:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Великі римські цифри:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Маленькі римські цифри:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Список може бути вкладеним (списки всередині списків):
Приклад
<ul>
<li>Кава</li>
<li>Чай
<ul>
<li>Чорний чай</li>
<li>Зелений чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Ми також можемо стилізувати списки за допомогою кольорів, щоб вони вигляділи дещо цікавіше.
Все, що додано в тег <ol> або <ul> впливає на весь список, в той час як властивості, додані в тег <li>, впливають на окремі елементи списку:
Приклад
ol {
background: #ff9999;
padding: 20;
}
ul {
background: #3399ff;
padding: 20;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
Горизонтальний список за допомогою CSS
HTML-списки можна стилізувати різними способами за допомогою CSS.
Один із популярних способів – це стилізувати список по горизонталі для створення меню навігації:
Приклад
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
HTML таблиці дозволяють веброзробникам упорядковувати дані у рядки та стовпці.
Теги для створення таблиць:
<table>…</table> - таблиця;
<tr>…</tr> - рядок таблиці;
<th>…</th> - заголовок таблиці;
<td>…</td> - клітинка таблиці.
За замовчуванням текст в елементах <th> виділений жирним шрифтом і відцентрований.
За замовчуванням текст в елементах <td> є звичайним і вирівняним за лівим краєм.
Елементи <td> - це контейнери даних таблиці.
Вони можуть містити всілякі елементи HTML: текст, зображення, списки, інші таблиці тощо.
Приклад простої HTML таблиці:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML таблиці можуть мати межі різних стилів і форм.
Щоб додати межу до таблиці, використовуйте CSS властивість border:
Приклад
table, th, td {
border: 1px solid black;
}
Зверніть увагу, що таблиця в наведених вище прикладах має подвійні межі. Це пов’язано з тим, що і таблиця, і елементи <th> та <td> мають окремі межі.
Властивість border-collapse визначає, чи повинні межі таблиці згортатися в одну межу:
table {
border-collapse: collapse;
}
Ширина та висота таблиці визначаються властивостями width та height.
Їх можна вказувати у відсотках та у пікселях. Використання відсотків в якості одиниці виміру ширини означає, наскільки широким буде цей елемент порівняно з його батьківським елементом, яким в даному випадку є елемент <body>
table {
width: 100%;
}
th {
height: 70px;
}
2
Рефлексія від 0 учнів
Сподобався:
0
Так: 0
Ні: 0
Зрозумілий:
0
Так: 0
Ні: 0
Потрібні роз'яснення:
0
Ні: 0
Так: 0