07. Списки и таблицы
Сегодня ты научишься делать списки и таблицы — это важные элементы любого сайта. С помощью списков можно создать меню, а таблицы помогают красиво показывать данные: расписание, таблицу рекордов или даже список друзей!
Списки — это порядок, а таблицы — структура. Вместе они делают сайт понятным!
Что такое список
Список — это как блок заметок или меню на сайте. Каждый пункт списка — это элемент с тегом <li> (от слова «list item» — элемент списка).Есть два вида списков:
- <ul> — неупорядоченный (с кружочками или точками)
- <ol> — упорядоченный (с цифрами)
Пример неупорядоченного списка (ul)
<ul>
<li>Главная</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
Этот список браузер покажет как пункты с точками. Такое часто используют для меню или коротких списков задач.
Пример упорядоченного списка (ol)
<ol>
<li>Проснуться</li>
<li>Позавтракать</li>
<li>Пойти в школу</li>
<li>Поиграть </li>
</ol>
Здесь браузер сам пронумерует пункты. Ты можешь изменить порядок, просто переставив строки!
Добавляем стиль (по желанию)
Можно сделать список аккуратнее:
<ul style="list-style-type: square; color: blue;">
<li>Новости</li>
<li>Фотографии</li>
<li>Контакты</li>
</ul>
Что такое таблица
Таблица помогает показать данные в виде строк и столбцов. Представь дневник или расписание — вот и таблица!Основные теги:
- <table> — создаёт таблицу
- <tr> — строка таблицы
- <th> — заголовок столбца (жирный текст)
- <td> — обычная ячейка (данные)
Пример таблицы
<table border="1" cellpadding="8" style="border-collapse: collapse;">
<tr>
<th>Время</th>
<th>Дело</th>
</tr>
<tr>
<td>08:00</td>
<td>Завтрак</td>
</tr>
<tr>
<td>10:00</td>
<td>Учёба</td>
</tr>
<tr>
<td>14:00</td>
<td>Прогулка</td>
</tr>
</table>
Теперь у тебя есть маленький календарик дел!
Украшаем таблицу
Хочешь, чтобы таблица выглядела круче?
<table border="1" cellpadding="8" style="border-collapse:collapse; width:60%; text-align:center; background-color:#f9f9f9;">
<tr style="background-color:#d0e6ff;">
<th>Время</th>
<th>Дело</th>
</tr>
<tr>
<td>09:00</td>
<td>Утренняя зарядка </td>
</tr>
<tr>
<td>13:00</td>
<td>Обед </td>
</tr>
<tr>
<td>17:00</td>
<td>Играть в Minecraft </td>
</tr>
</table>
Таблицы любят порядок! Каждая строка — в <tr>, каждая ячейка — в <td>. Без этого браузер запутается!
Мини-проект
Создай страницу под названием Моё расписание. На ней сделай:- Меню сайта (список ul с пунктами: Главная, Галерея, Контакты).
- Таблицу с твоим расписанием — например, что ты делаешь утром, днём и вечером.
Пример:
<h1>Моё расписание</h1>
<ul>
<li>Главная</li>
<li>Фото</li>
<li>Контакты</li>
</ul><table border="1" cellpadding="8" style="border-collapse:collapse;">
<tr><th>Время</th><th>Занятие</th></tr>
<tr><td>08:00</td><td>Завтрак </td></tr>
<tr><td>10:00</td><td>Учёба </td></tr>
<tr><td>15:00</td><td>Прогулка 🚴</td></tr>
<tr><td>19:00</td><td>Игры </td></tr>
</table>
Совет от профи
Если ты хочешь, чтобы таблица не имела «двоенных» линий, добавь стиль: border-collapse: collapse;. Это делает границы аккуратными и сливает их в одну.Главное запомни
- <ul> + <li> — создают списки.
- <ol> — делает список с цифрами.
- <table> — таблица, <tr> — строка, <td> — ячейка.
- Используй <th> для заголовков и стиль border-collapse для красоты.
Мини-тест
- Какой тег создаёт список с точками?
- Чем отличается <ol> от <ul>?
- Какие теги нужны для таблицы?