7 подписчиков

Учебник по HTML для пенсионеров (часть 4)

25 ноября25 ноя

82 мин

Оглавление

Глава 9: Простые таблицы (для наглядности)
9.1. Создаём таблицу: теги <table>, <tr> (строка), <td> (ячейка)

(продолжение)

Глава 9:
Простые таблицы (для наглядности)

9.1. Создаём таблицу: теги <table>, <tr> (строка), <td> (ячейка)

Введение: Организуем данные в стройные ряды и колонки

Таблицы в HTML — это мощный инструмент для представления структурированной информации. Они идеально подходят для расписаний, прайс-листов, сравнения характеристик и любых данных, которые имеют четкую строковую и столбцовую организацию.

Часть 1: Базовая структура HTML-таблицы

Основные теги таблицы:

<table> — контейнер для всей таблицы

<tr> (table row) — строка таблицы

<td> (table data) — ячейка с данными

Простейшая таблица 2×2:

html

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

Часть 2: Визуализация структуры таблицы

Как браузер "видит" таблицу:

text

<table> ← НАЧАЛО ТАБЛИЦЫ
<tr> ← ПЕРВАЯ СТРОКА
<td>А1</td> ← ЯЧЕЙКА A1
<td>Б1</td> ← ЯЧЕЙКА Б1
<td>В1</td> ← ЯЧЕЙКА В1
</tr> ← КОНЕЦ СТРОКИ
<tr> ← ВТОРАЯ СТРОКА
<td>А2</td> ← ЯЧЕЙКА A2
<td>Б2</td> ← ЯЧЕЙКА Б2
<td>В2</td> ← ЯЧЕЙКА В2
</tr> ← КОНЕЦ СТРОКИ
</table> ← КОНЕЦ ТАБЛИЦЫ

Часть 3: Практические примеры таблиц

Пример 1: Расписание полива растений

html

<table border="1">
<tr>
<td>Растение</td>
<td>Понедельник</td>
<td>Среда</td>
<td>Пятница</td>
</tr>
<tr>
<td>Розы</td>
<td>✅ Полить</td>
<td>❌ Не поливать</td>
<td>✅ Полить</td>
</tr>
<tr>
<td>Помидоры</td>
<td>✅ Полить</td>
<td>✅ Полить</td>
<td>✅ Полить</td>
</tr>
<tr>
<td>Кактусы</td>
<td>❌ Не поливать</td>
<td>❌ Не поливать</td>
<td>✅ Полить</td>
</tr>
</table>

Результат:

Пример 2: Список покупок для сада

html

<table border="1">
<tr>
<td>№</td>
<td>Товар</td>
<td>Количество</td>
<td>Цена</td>
</tr>
<tr>
<td>1</td>
<td>Удобрение для роз</td>
<td>2 шт.</td>
<td>350 руб.</td>
</tr>
<tr>
<td>2</td>
<td>Семена помидоров</td>
<td>1 упаковка</td>
<td>120 руб.</td>
</tr>
<tr>
<td>3</td>
<td>Садовые перчатки</td>
<td>1 пара</td>
<td>280 руб.</td>
</tr>
</table>

Пример 3: График занятий HTML

html

<table border="1">
<tr>
<td>День недели</td>
<td>Тема занятия</td>
<td>Время</td>
</tr>
<tr>
<td>Понедельник</td>
<td>Изучение тегов</td>
<td>14:00 - 15:30</td>
</tr>
<tr>
<td>Среда</td>
<td>Работа с текстом</td>
<td>14:00 - 16:00</td>
</tr>
<tr>
<td>Пятница</td>
<td>Практика: создание страниц</td>
<td>15:00 - 17:00</td>
</tr>
</table>

Часть 4: Атрибут border — границы таблицы

Без границ:

html

С тонкой границей:

html

С толстой границей:

html

Важно: Атрибут border устарел, но идеально подходит для обучения, так как сразу делает таблицу видимой.

Часть 5: Полная страница с различными таблицами

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика с таблицами</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.table-container {
margin: 30px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
th, td {
border: 1px solid #ccc;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.garden-schedule tr:nth-child(even) {
background-color: #f9f9f9;
}
.shopping-list td:first-child {
font-weight: bold;
background-color: #e6f3ff;
}
</style>
</head>
<body>
<h1>📊 Практика работы с HTML-таблицами</h1>


<div class="table-container">
<h2>🌷 График ухода за садом</h2>
<table class="garden-schedule">
<tr>
<th>День недели</th>
<th>Утренние работы<br>(8:00 - 10:00)</th>
<th>Вечерние работы<br>(18:00 - 20:00)</th>
<th>Примечания</th>
</tr>
<tr>
<td>Понедельник</td>
<td>Полив цветов</td>
<td>Прополка грядок</td>
<td>Проверить розы на вредителей</td>
</tr>
<tr>
<td>Вторник</td>
<td>Подкормка овощей</td>
<td>Рыхление почвы</td>
<td>Удобрить помидоры</td>
</tr>
<tr>
<td>Среда</td>
<td>Обрезка кустов</td>
<td>Полив всего сада</td>
<td>Особенно тщательно полить новые посадки</td>
</tr>
<tr>
<td>Четверг</td>
<td>Сбор урожая</td>
<td>Подвязка растений</td>
<td>Собрать спелые огурцы и помидоры</td>
</tr>
<tr>
<td>Пятница</td>
<td>Уход за газоном</td>
<td>Подготовка к выходным</td>
<td>Проверить весь инвентарь</td>
</tr>
</table>
</div>


<div class="table-container">
<h2>🌿 Мои растения в саду</h2>
<table>
<tr>
<th>Название растения</th>
<th>Дата посадки</th>
<th>Местоположение</th>
<th>Особенности ухода</th>
</tr>
<tr>
<td>Роза "Красная сказка"</td>
<td>15.04.2024</td>
<td>Солнечная сторона</td>
<td>Полив через день, подкормка раз в 2 недели</td>
</tr>
<tr>
<td>Помидоры "Бычье сердце"</td>
<td>20.05.2024</td>
<td>Теплица</td>
<td>Ежедневный полив, пасынкование</td>
</tr>
<tr>
<td>Огурцы "Зозуля"</td>
<td>18.05.2024</td>
<td>Грядка № 3</td>
<td>Обильный полив, сбор каждые 2 дня</td>
</tr>
<tr>
<td>Пионы "Сара Бернар"</td>
<td>10.09.2023</td>
<td>Цветник у дома</td>
<td>Минимальный уход, подкормка весной</td>
</tr>
</table>
</div>


<div class="table-container">
<h2>💻 Мой план изучения HTML</h2>
<table>
<tr>
<th>Неделя</th>
<th>Тема</th>
<th>Что изучил</th>
<th>Статус</th>
</tr>
<tr>
<td>1</td>
<td>Основы HTML</td>
<td>Структура страницы, теги, атрибуты</td>
<td>✅ Завершено</td>
</tr>
<tr>
<td>2</td>
<td>Работа с текстом</td>
<td>Заголовки, абзацы, списки, форматирование</td>
<td>✅ Завершено</td>
</tr>
<tr>
<td>3</td>
<td>Ссылки и изображения</td>
<td>Гиперссылки, картинки, навигация</td>
<td>✅ Завершено</td>
</tr>
<tr>
<td>4</td>
<td>Таблицы</td>
<td>Создание таблиц, строки, ячейки</td>
<td>🔄 В процессе</td>
</tr>
<tr>
<td>5</td>
<td>Формы</td>
<td>Поля ввода, кнопки, отправка данных</td>
<td>⏳ В планах</td>
</tr>
</table>
</div>


<div class="table-container">
<h2>🎯 Простая таблица для тренировки</h2>
<table border="1">
<tr>
<td>Ячейка A1</td>
<td>Ячейка A2</td>
<td>Ячейка A3</td>
</tr>
<tr>
<td>Ячейка B1</td>
<td>Ячейка B2</td>
<td>Ячейка B3</td>
</tr>
<tr>
<td>Ячейка C1</td>
<td>Ячейка C2</td>
<td>Ячейка C3</td>
</tr>
</table>
<p><em>Попробуйте изменить содержимое ячеек!</em></p>
</div>
</body>
</html>

Часть 6: Объединение ячеек

Объединение по горизонтали (colspan):

html

<table border="1">
<tr>
<td colspan="2">Эта ячейка занимает две колонки</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Объединение по вертикали (rowspan):

html

<table border="1">
<tr>
<td rowspan="2">Эта ячейка занимает две строки</td>
<td>Ячейка 1</td>
</tr>
<tr>
<td>Ячейка 2</td>
</tr>
</table>

Часть 7: Практическое задание

Задание 1: Создайте таблицу распорядка дня

html

<table border="1">
<tr>
<th>Время</th>
<th>Понедельник</th>
<th>Вторник</th>
<th>Среда</th>
</tr>
<tr>
<td>8:00 - 10:00</td>
<td>Зарядка, завтрак</td>
<td>Зарядка, завтрак</td>
<td>Зарядка, завтрак</td>
</tr>
<tr>
<td>10:00 - 12:00</td>
<td>Работа в саду</td>
<td>Изучение HTML</td>
<td>Работа в саду</td>
</tr>

</table>

Задание 2: Таблица любимых книг

html

<table border="1">
<tr>
<th>Автор</th>
<th>Название книги</th>
<th>Год прочтения</th>
<th>Оценка</th>
</tr>
<tr>
<td>Александр Дюма</td>
<td>Три мушкетера</td>
<td>2023</td>
<td>★★★★★</td>
</tr>

</table>

Часть 8: Частые ошибки и лучшие практики

❌ НЕПРАВИЛЬНО:

html


<table>
<td>Ячейка без строки</td> 
</table>


<table>
<tr>
<td>Ячейка 1
<td>Ячейка 2 
</tr>
</table>

✅ ПРАВИЛЬНО:

html


<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>


<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
</tr>
</table>

Часть 9: Семантика и доступность

Тег <th> для заголовков:

html

<table>
<tr>
<th>Название</th> 
<th>Цена</th>
<th>Количество</th>
</tr>
<tr>
<td>Помидоры</td>
<td>150 руб/кг</td>
<td>2 кг</td>
</tr>
</table>

Scope для скринридеров:

html

<table>
<tr>
<th scope="col">Продукт</th> 
<th scope="col">Цена</th>
</tr>
<tr>
<th scope="row">Хлеб</th> 
<td>50 руб.</td>
</tr>
</table>

Заключение

Что Вы теперь умеете:

✅ Создавать базовые HTML-таблицы

✅ Использовать теги <table>, <tr>, <td>

✅ Добавлять границы с помощью атрибута border

✅ Создавать сложные таблицы с заголовками

✅ Организовывать данные в стройные структуры

Ключевые преимущества таблиц:

📊 Структурированность — четкая организация данных

📋 Сравнимость — легко сравнивать значения

🎯 Наглядность — информация воспринимается легче

♿ Доступность — правильная семантика для скринридеров

📱 Адаптивность — можно сделать отзывчивой

Когда использовать таблицы:

✅ Табличные данные (расписания, прайс-листы)

✅ Сравнительные характеристики

✅ Статистическая информация

✅ Структурированные списки

Когда НЕ использовать таблицы:

❌ Для верстки страницы (используйте CSS)

❌ Для простого расположения элементов

❌ Когда данные не имеют табличной природы

Следующие шаги:

Попрактикуйтесь с простыми таблицами 2×2 и 3×3

Создайте таблицу своего недельного расписания

Добавьте таблицу на свою главную страницу

Экспериментируйте с объединением ячеек

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

- * * * -

9.2. Заголовки столбцов в таблице: тег <th>

Введение: Делаем таблицы понятными и семантически правильными

Тег <th> (table header) — это специальный тег для создания заголовков в таблицах. Он не только визуально выделяет заголовки, но и добавляет семантический смысл, помогая браузерам, поисковым системам и скринридерам правильно понимать структуру ваших данных.

Часть 1: Что такое тег <th> и зачем он нужен?

Основное назначение:

<th> — создает ячейку-заголовок для столбца или строки

<td> — создает обычную ячейку с данными

Визуальная разница:

По умолчанию браузер отображает <th>:

Жирным шрифтом

Выравниванием по центру

Семантически как заголовок

Часть 2: Сравнение <th> и <td>

Без <th> (неправильно):

html

<table border="1">
<tr>
<td><strong>Растение</strong></td> 
<td><strong>Полив</strong></td>
<td><strong>Удобрение</strong></td>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
<td>Раз в неделю</td>
</tr>
</table>

С <th> (правильно):

html

<table border="1">
<tr>
<th>Растение</th> 
<th>Полив</th>
<th>Удобрение</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
<td>Раз в неделю</td>
</tr>
</table>

Результат:

Часть 3: Практические примеры с <th>

Пример 1: Таблица ухода за растениями

html

<table border="1">
<tr>
<th>Название растения</th>
<th>Частота полива</th>
<th>Лучшее время для полива</th>
<th>Особые указания</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
<td>Утро (6:00-8:00)</td>
<td>Не поливать листья</td>
</tr>
<tr>
<td>Помидоры</td>
<td>Через день</td>
<td>Вечер (18:00-20:00)</td>
<td>Поливать под корень</td>
</tr>
<tr>
<td>Кактусы</td>
<td>Раз в неделю</td>
<td>Утро</td>
<td>Маленькими порциями</td>
</tr>
</table>

Пример 2: Расписание занятий

html

<table border="1">
<tr>
<th>Время</th>
<th>Понедельник</th>
<th>Среда</th>
<th>Пятница</th>
</tr>
<tr>
<td>10:00-11:30</td>
<td>HTML: основы</td>
<td>CSS: стили</td>
<td>Практика</td>
</tr>
<tr>
<td>14:00-15:30</td>
<td>Садоводство</td>
<td>Чтение</td>
<td>Отдых</td>
</tr>
</table>

Пример 3: Список покупок для сада

html

<table border="1">
<tr>
<th>№</th>
<th>Наименование</th>
<th>Количество</th>
<th>Примерная цена</th>
<th>Приоритет</th>
</tr>
<tr>
<td>1</td>
<td>Удобрение для роз</td>
<td>2 кг</td>
<td>450 руб.</td>
<td>Высокий</td>
</tr>
<tr>
<td>2</td>
<td>Семена огурцов</td>
<td>1 упаковка</td>
<td>85 руб.</td>
<td>Средний</td>
</tr>
<tr>
<td>3</td>
<td>Садовые перчатки</td>
<td>1 пара</td>
<td>320 руб.</td>
<td>Низкий</td>
</tr>
</table>

Часть 4: Атрибут scope — для улучшения доступности

Что такое scope:

Атрибут scope указывает, к чему относится заголовок — к столбцу или строке.

scope="col" — заголовок столбца:

html

<table border="1">
<tr>
<th scope="col">Растение</th> 
<th scope="col">Январь</th>
<th scope="col">Февраль</th>
<th scope="col">Март</th>
</tr>
<tr>
<td>Розы</td>
<td>Обрезка</td>
<td>Укрытие</td>
<td>Пробуждение</td>
</tr>
</table>

scope="row" — заголовок строки:

html

<table border="1">
<tr>
<th scope="col">Месяц</th>
<th scope="col">Работы в саду</th>
</tr>
<tr>
<th scope="row">Январь</th> 
<td>Планирование, заказ семян</td>
</tr>
<tr>
<th scope="row">Февраль</th>
<td>Посев рассады</td>
</tr>
</table>

Часть 5: Полная страница с семантическими таблицами

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Семантические таблицы с тегом<th></title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
.table-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>🎯 Заголовки таблиц: тег<th></h1>

<div class="note">
<strong>💡 Важно:</strong> Тег<th> не только визуально выделяет заголовки, но и добавляет семантический смысл для браузеров и скринридеров.
</div>


<div class="table-section">
<h2>🌷 Годовой календарь садовода</h2>

<table>
<tr>
<th scope="col">Сезон</th>
<th scope="col">Основные работы</th>
<th scope="col">Посадка</th>
<th scope="col">Уход</th>
<th scope="col">Сбор урожая</th>
</tr>
<tr>
<th scope="row">Весна<br>(Март-Май)</th>
<td>Подготовка почвы, посев</td>
<td>Овощи, цветы</td>
<td>Полив, прополка</td>
<td>Редис, салат</td>
</tr>
<tr>
<th scope="row">Лето<br>(Июнь-Август)</th>
<td>Уход за растениями</td>
<td>Поздние культуры</td>
<td>Подкормка, защита</td>
<td>Огурцы, помидоры</td>
</tr>
<tr>
<th scope="row">Осень<br>(Сентябрь-Ноябрь)</th>
<td>Уборка, подготовка к зиме</td>
<td>Озимые культуры</td>
<td>Обрезка, укрытие</td>
<td>Яблоки, груши</td>
</tr>
<tr>
<th scope="row">Зима<br>(Декабрь-Февраль)</th>
<td>Планирование, ремонт</td>
<td>Рассада в доме</td>
<td>Защита от морозов</td>
<td>Хранение урожая</td>
</tr>
</table>
</div>


<div class="table-section">
<h2>🌿 Сравнение сортов помидоров</h2>

<table>
<tr>
<th scope="col">Сорт</th>
<th scope="col">Срок созревания</th>
<th scope="col">Вкус</th>
<th scope="col">Урожайность</th>
<th scope="col">Устойчивость к болезням</th>
<th scope="col">Рекомендации</th>
</tr>
<tr>
<th scope="row">Бычье сердце</th>
<td>120-130 дней</td>
<td>Отличный</td>
<td>Средняя</td>
<td>Средняя</td>
<td>Для салатов, крупные плоды</td>
</tr>
<tr>
<th scope="row">Черри</th>
<td>90-100 дней</td>
<td>Сладкий</td>
<td>Высокая</td>
<td>Высокая</td>
<td>Для закусок, консервации</td>
</tr>
<tr>
<th scope="row">Де Барао</th>
<td>115-125 дней</td>
<td>Кисло-сладкий</td>
<td>Очень высокая</td>
<td>Высокая</td>
<td>Универсальный, для всего</td>
</tr>
</table>
</div>


<div class="table-section">
<h2>💻 План обучения веб-разработке</h2>

<table>
<tr>
<th scope="col">Этап</th>
<th scope="col">Технология</th>
<th scope="col">Срок изучения</th>
<th scope="col">Что изучим</th>
<th scope="col">Практический проект</th>
<th scope="col">Статус</th>
</tr>
<tr>
<th scope="row">1</th>
<td>HTML</td>
<td>3-4 недели</td>
<td>Структура, теги, семантика</td>
<td>Личный сайт-визитка</td>
<td>✅ Завершено</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS</td>
<td>4-5 недель</td>
<td>Стили, макет, анимации</td>
<td>Красивое оформление сайта</td>
<td>🔄 В процессе</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JavaScript</td>
<td>6-8 недель</td>
<td>Интерактивность, логика</td>
<td>Интерактивные элементы</td>
<td>⏳ В планах</td>
</tr>
</table>
</div>


<div class="table-section">
<h2>📝 Пример кода с<th></h2>

<div class="code-example">
<table border="1">
<tr>
<th scope="col">Растение</th>
<th scope="col">Полив</th>
<th scope="col">Удобрение</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
<td>Раз в неделю</td>
</tr>
</table>
</div>

<div class="note">
<strong>🎯 Ключевые моменты:</strong>
<ul>
<li>Используйте <code><th></code> для заголовков</li>
<li>Добавляйте <code>scope="col"</code> для заголовков столбцов</li>
<li>Добавляйте <code>scope="row"</code> для заголовков строк</li>
<li>Это улучшает доступность для скринридеров</li>
</ul>
</div>
</div>


<div class="table-section">
<h2>🎯 Практическое задание</h2>

<h3>Создайте таблицу своих ежедневных дел:</h3>

<table border="1">
<tr>
<th scope="col">Время</th>
<th scope="col">Понедельник</th>
<th scope="col">Вторник</th>
<th scope="col">Среда</th>
</tr>
<tr>
<th scope="row">8:00-10:00</th>
<td>Завтрак, зарядка</td>
<td>Завтрак, зарядка</td>
<td>Завтрак, зарядка</td>
</tr>
<tr>
<th scope="row">10:00-12:00</th>
<td>▼ Ваши занятия</td>
<td>▼ Ваши занятия</td>
<td>▼ Ваши занятия</td>
</tr>
<tr>
<th scope="row">14:00-16:00</th>
<td>▼ Ваши занятия</td>
<td>▼ Ваши занятия</td>
<td>▼ Ваши занятия</td>
</tr>
</table>

<p><strong>Задание:</strong> Замените "▼ Ваши занятия" на свои реальные дела!</p>
</div>
</body>
</html>

Часть 6: Стилизация заголовков <th>

Базовые CSS-стили:

css

th {
background-color: #4CAF50; /* Зеленый фон */
color: white; /* Белый текст */
font-weight: bold; /* Жирный шрифт */
text-align: center; /* Выравнивание по центру */
padding: 12px; /* Внутренние отступы */
border: 1px solid #ddd; /* Граница */
}

Разные цвета для разных типов заголовков:

css

/* Заголовки столбцов */
th[scope="col"] {
background-color: #2196F3; /* Синий */
}

/* Заголовки строк */
th[scope="row"] {
background-color: #FF9800; /* Оранжевый */
text-align: left;
}

Часть 7: Лучшие практики и частые ошибки

✅ ПРАВИЛЬНО:

html


<table>
<tr>
<th scope="col">Название</th>
<th scope="col">Цена</th>
<th scope="col">Количество</th>
</tr>
<tr>
<th scope="row">Помидоры</th>
<td>150 руб/кг</td>
<td>2 кг</td>
</tr>
</table>

❌ НЕПРАВИЛЬНО:

html


<table>
<tr>
<td><strong>Название</strong></td> 
<th>Цена</th>
<td>Количество</td>
</tr>
</table>


<table>
<tr>
<th>Название</th> 
<th>Цена</th>
</tr>
</table>

Часть 8: Доступность для скринридеров

Как скринридеры читают таблицы:

Без <th>: "Таблица с 3 столбцами и 4 строками"

С <th>: "Таблица: Растение, Полив, Удобрение. Строка 1: Розы, Каждый день, Раз в неделю"

Правильная структура для доступности:

html

<table>
<tr>
<th scope="col" id="plant">Растение</th>
<th scope="col" id="water">Полив</th>
<th scope="col" id="fertilize">Удобрение</th>
</tr>
<tr>
<th scope="row" id="roses">Розы</th>
<td headers="plant roses water">Каждый день</td>
<td headers="plant roses fertilize">Раз в неделю</td>
</tr>
</table>

Часть 9: Практическое задание для закрепления

Задание: Создайте таблицу ваших увлечений

html

<table border="1">
<tr>
<th scope="col">Увлечение</th>
<th scope="col">Как часто занимаюсь</th>
<th scope="col">Любимый аспект</th>
<th scope="col">Что планирую изучить</th>
</tr>
<tr>
<th scope="row">Садоводство</th>
<td>Ежедневно</td>
<td>Выращивание роз</td>
<td>Новые сорта пионов</td>
</tr>
<tr>
<th scope="row">Веб-разработка</th>
<td>3 раза в неделю</td>
<td>Создание сайтов</td>
<td>CSS и JavaScript</td>
</tr>
<tr>
<th scope="row">Чтение</th>
<td>Каждый вечер</td>
<td>Исторические романы</td>
<td>Современную литературу</td>
</tr>
</table>

Заключение

Что Вы теперь умеете:

✅ Использовать тег <th> для заголовков таблиц

✅ Различать <th> и <td> по назначению

✅ Применять атрибут scope для доступности

✅ Создавать семантически правильные таблицы

✅ Стилизовать заголовки для лучшего восприятия

Ключевые преимущества <th>:

♿ Доступность — помощь скринридерам

🔍 SEO — лучшая индексация поисковыми системами

🎨 Визуальное выделение — понятная структура

📊 Семантика — ясное назначение элементов

💻 Единообразие — стандартное поведение в браузерах

Золотые правила использования <th>:

Всегда используйте <th> для заголовков

Добавляйте scope="col" для заголовков столбцов

Добавляйте scope="row" для заголовков строк

Используйте осмысленные и понятные заголовки

Тестируйте со скринридерами для проверки доступности

Помните: Правильное использование <th> превращает Вашу таблицу из простого набора данных в хорошо структурированную, доступную и профессиональную информацию!

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

- * * * -

9.3. Простая рамка для таблицы

Введение: Делаем таблицы видимыми и аккуратными

Рамка вокруг таблицы — это не просто декоративный элемент. Она помогает визуально отделить таблицу от остального контента, делает данные более читаемыми и создает четкую структуру. Давайте научимся управлять рамками таблиц!

Часть 1: Базовые способы создания рамки

Способ 1: Атрибут border (самый простой)

html

<table border="1">
<tr>
<th>Растение</th>
<th>Полив</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
</tr>
</table>

Результат:

Разные значения border:

html

<table border="1"> 
<table border="3"> 
<table border="5"> 
<table border="0"> 

Часть 2: CSS-стили для продвинутого оформления

Способ 2: CSS свойство border

html

Разбор CSS border:

css

border: 2px solid black;
/*
2px - толщина рамки
solid - стиль линии (сплошная)
black - цвет рамки
*/

Часть 3: Различные стили рамок

Сплошная рамка (solid):

html

<tr>

Сплошная синяя рамка

</td>

</tr>

</table>

Пунктирная рамка (dashed):

html

<tr>

Пунктирная оранжевая рамка

</td>

</tr>

</table>

Точечная рамка (dotted):

html

<tr>

Точечная зеленая рамка

</td>

</tr>

</table>

Двойная рамка (double):

html

<table style="border: 4px double #9933cc; margin: 15px 0;"> <tr><td style="padding: 10px;">Двойная фиолетовая рамка</td></tr> </table>

Часть 4: Полная страница с примерами рамок

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Рамки для таблиц</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
/* Стили для демонстрационных таблиц */
.demo-table {
margin: 20px 0;
width: 100%;
}
.demo-table th, .demo-table td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>🎨 Рамки для HTML-таблиц</h1>

<div class="note">
<strong>💡 Совет:</strong> Рамка делает таблицу более читаемой и визуально привлекательной. Выбирайте стиль, который лучше всего подходит для Вашего контента!
</div>


<div class="example-section">
<h2>1. Простая рамка через атрибут border</h2>

<div class="code-example">
<table border="1">
<tr>
<th>Растение</th>
<th>Полив</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
</tr>
</table>
</div>

<table border="1" class="demo-table">
<tr>
<th>Растение</th>
<th>Полив</th>
<th>Удобрение</th>
</tr>
<tr>
<td>Розы</td>
<td>Каждый день</td>
<td>Раз в неделю</td>
</tr>
<tr>
<td>Помидоры</td>
<td>Через день</td>
<td>Раз в 2 недели</td>
</tr>
</table>
</div>


<div class="example-section">
<h2>2. CSS-рамки с разными стилями</h2>


<h3>Сплошная рамка (solid)</h3>
<div class="code-example">
<table style="border: 2px solid #3498db;">
</div>
<table style="border: 2px solid #3498db;" class="demo-table">
<tr><td>Синяя сплошная рамка</td></tr>
</table>


<h3>Пунктирная рамка (dashed)</h3>
<div class="code-example">
<table style="border: 3px dashed #e74c3c;">
</div>
<table style="border: 3px dashed #e74c3c;" class="demo-table">
<tr><td>Красная пунктирная рамка</td></tr>
</table>


<h3>Точечная рамка (dotted)</h3>
<div class="code-example">
<table style="border: 3px dotted #27ae60;">
</div>
<table style="border: 3px dotted #27ae60;" class="demo-table">
<tr><td>Зеленая точечная рамка</td></tr>
</table>


<h3>Двойная рамка (double)</h3>
<div class="code-example">
<table style="border: 5px double #8e44ad;">
</div>
<table style="border: 5px double #8e44ad;" class="demo-table">
<tr><td>Фиолетовая двойная рамка</td></tr>
</table>
</div>


<div class="example-section">
<h2>3. Практический пример: График полива растений</h2>

<table style="border: 3px solid #2c3e50; border-collapse: collapse; width: 100%;">
<tr style="background-color: #34495e; color: white;">
<th style="border: 1px solid #2c3e50; padding: 12px;">Растение</th>
<th style="border: 1px solid #2c3e50; padding: 12px;">Понедельник</th>
<th style="border: 1px solid #2c3e50; padding: 12px;">Среда</th>
<th style="border: 1px solid #2c3e50; padding: 12px;">Пятница</th>
<th style="border: 1px solid #2c3e50; padding: 12px;">Воскресенье</th>
</tr>
<tr>
<td style="border: 1px solid #bdc3c7; padding: 10px; background: #ecf0f1;">Розы</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">❌ Не поливать</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
</tr>
<tr>
<td style="border: 1px solid #bdc3c7; padding: 10px; background: #ecf0f1;">Помидоры</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
</tr>
<tr>
<td style="border: 1px solid #bdc3c7; padding: 10px; background: #ecf0f1;">Кактусы</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">❌ Не поливать</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">❌ Не поливать</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">❌ Не поливать</td>
<td style="border: 1px solid #bdc3c7; padding: 10px;">✅ Полить</td>
</tr>
</table>

<div class="code-example">
<table style="border: 3px solid #2c3e50; border-collapse: collapse;">
<tr style="background-color: #34495e; color: white;">
<th style="border: 1px solid #2c3e50; padding: 12px;">Растение</th>

</tr>

</table>
</div>
</div>


<div class="example-section">
<h2>4. Творческие варианты рамок</h2>


<h3>Тень вместо рамки</h3>
<table style="box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;" class="demo-table">
<tr style="background: linear-gradient(135deg, #667eea, #764ba2); color: white;">
<th style="padding: 15px;">Увлечение</th>
<th style="padding: 15px;">Время</th>
</tr>
<tr>
<td style="padding: 12px;">Садоводство</td>
<td style="padding: 12px;">Утро</td>
</tr>
<tr>
<td style="padding: 12px;">Чтение</td>
<td style="padding: 12px;">Вечер</td>
</tr>
</table>


<h3>Рамка с закругленными углами</h3>
<table style="border: 2px solid #e74c3c; border-radius: 15px; overflow: hidden;" class="demo-table">
<tr style="background: #e74c3c; color: white;">
<th style="padding: 12px;">День</th>
<th style="padding: 12px;">Занятие</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">HTML</td>
</tr>
<tr>
<td style="padding: 10px;">Среда</td>
<td style="padding: 10px;">CSS</td>
</tr>
</table>
</div>


<div class="example-section">
<h2>🎯 Шпаргалка по рамкам</h2>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
<div style="border: 2px solid #3498db; padding: 10px; text-align: center;">
<strong>Solid</strong><br>сплошная
</div>
<div style="border: 2px dashed #e74c3c; padding: 10px; text-align: center;">
<strong>Dashed</strong><br>пунктирная
</div>
<div style="border: 2px dotted #27ae60; padding: 10px; text-align: center;">
<strong>Dotted</strong><br>точечная
</div>
<div style="border: 4px double #8e44ad; padding: 10px; text-align: center;">
<strong>Double</strong><br>двойная
</div>
</div>

<div class="note">
<strong>📋 Быстрые примеры:</strong>
<ul>
<li><code>border: 1px solid black;</code> - черная сплошная</li>
<li><code>border: 2px dashed red;</code> - красная пунктирная</li>
<li><code>border: 3px dotted green;</code> - зеленая точечная</li>
<li><code>border: 4px double blue;</code> - синяя двойная</li>
</ul>
</div>
</div>
</body>
</html>

Часть 5: Важные CSS-свойства для рамок

border-collapse — объединение границ

html

collapse — границы ячеек объединяются (рекомендуется)

separate — границы ячеек разделены (по умолчанию)

Сравнение:

html


<table style="border-collapse: separate; border: 2px solid blue;">
<tr><td style="border: 1px solid red;">Ячейка 1</td></tr>
</table>


<table style="border-collapse: collapse; border: 2px solid blue;">
<tr><td style="border: 1px solid red;">Ячейка 1</td></tr>
</table>

Часть 6: Практическое задание

Задание 1: Создайте таблицу с разными рамками

html

<!DOCTYPE html>
<html>
<head>
<title>Практика с рамками</title>
<style>
.table-exercise {
margin: 20px;
padding: 15px;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<h1>Практика: Рамки для таблиц</h1>


<div class="table-exercise">
<h3>1. Таблица с простой черной рамкой</h3>
<table border="1">
<tr>
<th>День</th>
<th>Завтрак</th>
<th>Обед</th>
<th>Ужин</th>
</tr>
<tr>
<td>Понедельник</td>
<td>Каша</td>
<td>Суп</td>
<td>Рыба</td>
</tr>
</table>
</div>


<div class="table-exercise">
<h3>2. Таблица с синей рамкой (используйте CSS)</h3>
<table style="border: 2px solid blue;">
<tr>
<th>Книга</th>
<th>Автор</th>
<th>Год</th>
</tr>
<tr>
<td>Война и мир</td>
<td>Лев Толстой</td>
<td>1869</td>
</tr>
</table>
</div>


<div class="table-exercise">
<h3>3. Таблица с зеленой пунктирной рамкой</h3>

</div>
</body>
</html>

Часть 7: Частые ошибки и решения

Ошибка 1: Двойные границы

html


<table border="1" style="border: 2px solid red;">

Решение: Используйте либо атрибут, либо CSS, но не оба одновременно.

Ошибка 2: Невидимая таблица

html


<table style="border: 1px solid white;">

Решение: Используйте контрастный цвет.

Ошибка 3: Слишком толстая рамка

html

Решение: Для большинства таблиц достаточно 1-3px.

Часть 8: Полезные советы

Совет 1: Используйте border-collapse

Всегда добавляйте border-collapse: collapse; для аккуратного вида:

html

Совет 2: Сочетайте с отступами

html

<table style="border: 2px solid #333; border-collapse: collapse;">
<tr>
<td style="padding: 10px;">Текст с отступами</td>
</tr>
</table>

Совет 3: Тестируйте на разных устройствах

Проверяйте, как выглядит рамка на:

Компьютере

Планшете

Телефоне

Заключение

Что Вы теперь умеете:

✅ Создавать простые рамки через атрибут border

✅ Использовать CSS для продвинутых стилей рамок

✅ Применять разные типы линий (solid, dashed,dotted, double)

✅ Управлять цветом и толщиной рамок

✅ Создавать аккуратные таблицы с border-collapse

Ключевые методы создания рамок:

<table border="1"> — самый простой способ

style="border: 2px solid black;" — гибкий CSS-способ

Комбинация с border-collapse: collapse; — для аккуратного вида

Рекомендации по выбору рамки:

🎯 Для данных — тонкая сплошная рамка

🎨 Для акцента — цветная или толстая рамка

📋 Для форм — пунктирная или точечная рамка

🏆 Для важных таблиц — двойная рамка

Помните: Хорошо подобранная рамка делает таблицу:

📖 Более читаемой

🎨 Визуально привлекательной

🏗️ Структурированной

💻 Профессиональной

Следующие шаги:

Попрактикуйтесь с разными стилями рамок

Создайте таблицу с закругленными углами

Поэкспериментируйте с тенями вместо рамок

Добавьте рамки на свои реальные проекты

Теперь Ваши таблицы будут не только функциональными, но и визуально привлекательными! Правильно подобранная рамка может значительно улучшить восприятие информации

- * * * -

9.4. Практика: Создаём таблицу "Расписание моих занятий" или "Расходы за неделю"

Введение: Превращаем данные в удобные таблицы

Сегодня мы закрепим все знания о таблицах на практике! Мы создадим полезные таблицы, которые Вы сможете использовать в повседневной жизни. Выберите тему, которая Вам ближе — расписание занятий или учёт расходов. Мы разберём обе, шаг за шагом.

Часть 1: Базовая структура таблицы

Начнём с простой таблицы, чтобы вспомнить основные теги.

html

<table border="1">
<tr>
<th>День недели</th>
<th>Время</th>
<th>Занятие</th>
</tr>
<tr>
<td>Понедельник</td>
<td>10:00</td>
<td>Йога</td>
</tr>
</table>

Результат:

Часть 2: Создаём расписание занятий

Давайте сделаем полноценное расписание на неделю с временем и примечаниями.

html

<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #4CAF50; color: white;">
<th style="padding: 12px;">День недели</th>
<th style="padding: 12px;">Время</th>
<th style="padding: 12px;">Занятие</th>
<th style="padding: 12px;">Место</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">10:00 - 11:30</td>
<td style="padding: 10px;">Йога для начинающих</td>
<td style="padding: 10px;">Спортзал № 1</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Вторник</td>
<td style="padding: 10px;">14:00 - 16:00</td>
<td style="padding: 10px;">Компьютерные курсы</td>
<td style="padding: 10px;">Кабинет 205</td>
</tr>
<tr>
<td style="padding: 10px;">Среда</td>
<td style="padding: 10px;">11:00 - 13:00</td>
<td style="padding: 10px;">Танцы</td>
<td style="padding: 10px;">Актовый зал</td>
</tr>
</table>

Результат:

Часть 3: Создаём таблицу расходов за неделю

Теперь давайте сделаем таблицу для контроля бюджета с подсчётом итогов.

html

<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #2196F3; color: white;">
<th style="padding: 12px;">День</th>
<th style="padding: 12px;">Категория расходов</th>
<th style="padding: 12px;">Сумма (руб.)</th>
<th style="padding: 12px;">Примечание</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">Продукты</td>
<td style="padding: 10px; text-align: right;">1 850</td>
<td style="padding: 10px;">Молоко, хлеб, овощи</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Вторник</td>
<td style="padding: 10px;">Коммунальные услуги</td>
<td style="padding: 10px; text-align: right;">5 240</td>
<td style="padding: 10px;">Квитанция №245</td>
</tr>
<tr>
<td style="padding: 10px;">Среда</td>
<td style="padding: 10px;">Транспорт</td>
<td style="padding: 10px; text-align: right;">600</td>
<td style="padding: 10px;">Проездной на месяц</td>
</tr>
<tr style="background-color: #ffeb3b; font-weight: bold;">
<td style="padding: 10px;" colspan="2">ИТОГО за неделю:</td>
<td style="padding: 10px; text-align: right;">7 690</td>
<td style="padding: 10px;">-</td>
</tr>
</table>

Результат:

Часть 4: Полная страница с примерами

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика: Создаём полезные таблицы</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #2c3e50;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.demo-table {
margin: 20px 0;
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>📊 Практика: Создаём полезные таблицы</h1>

<div class="note">
<strong>💡 Совет:</strong> Сегодня мы создадим таблицы, которые Вы сможете использовать в повседневной жизни! Выберите ту, что Вам больше нравится, или создайте обе.
</div>


<div class="example-section">
<h2>🎓 Вариант 1: Расписание моих занятий</h2>

<div class="code-example">
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #4CAF50; color: white;">
<th style="padding: 12px;">День недели</th>
<th style="padding: 12px;">Время</th>
<th style="padding: 12px;">Занятие</th>
<th style="padding: 12px;">Место</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">10:00 - 11:30</td>
<td style="padding: 10px;">Йога для начинающих</td>
<td style="padding: 10px;">Спортзал №1</td>
</tr>

</table>
</div>

<table border="1" class="demo-table">
<tr style="background-color: #4CAF50; color: white;">
<th style="padding: 12px;">День недели</th>
<th style="padding: 12px;">Время</th>
<th style="padding: 12px;">Занятие</th>
<th style="padding: 12px;">Место</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">10:00 - 11:30</td>
<td style="padding: 10px;">Йога для начинающих</td>
<td style="padding: 10px;">Спортзал №1</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Вторник</td>
<td style="padding: 10px;">14:00 - 16:00</td>
<td style="padding: 10px;">Компьютерные курсы</td>
<td style="padding: 10px;">Кабинет 205</td>
</tr>
<tr>
<td style="padding: 10px;">Среда</td>
<td style="padding: 10px;">11:00 - 13:00</td>
<td style="padding: 10px;">Танцы</td>
<td style="padding: 10px;">Актовый зал</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Четверг</td>
<td style="padding: 10px;">15:00 - 16:30</td>
<td style="padding: 10px;">Шахматный клуб</td>
<td style="padding: 10px;">Читальный зал</td>
</tr>
</table>
</div>


<div class="example-section">
<h2>💰 Вариант 2: Учёт расходов за неделю</h2>

<div class="code-example">
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #2196F3; color: white;">
<th style="padding: 12px;">День</th>
<th style="padding: 12px;">Категория расходов</th>
<th style="padding: 12px;">Сумма (руб.)</th>
<th style="padding: 12px;">Примечание</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">Продукты</td>
<td style="padding: 10px; text-align: right;">1 850</td>
<td style="padding: 10px;">Молоко, хлеб, овощи</td>
</tr>
</table>
</div>

<table border="1" class="demo-table">
<tr style="background-color: #2196F3; color: white;">
<th style="padding: 12px;">День</th>
<th style="padding: 12px;">Категория расходов</th>
<th style="padding: 12px;">Сумма (руб.)</th>
<th style="padding: 12px;">Примечание</th>
</tr>
<tr>
<td style="padding: 10px;">Понедельник</td>
<td style="padding: 10px;">Продукты</td>
<td style="padding: 10px; text-align: right;">1 850</td>
<td style="padding: 10px;">Молоко, хлеб, овощи</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Вторник</td>
<td style="padding: 10px;">Коммунальные услуги</td>
<td style="padding: 10px; text-align: right;">5 240</td>
<td style="padding: 10px;">Квитанция №245</td>
</tr>
<tr>
<td style="padding: 10px;">Среда</td>
<td style="padding: 10px;">Транспорт</td>
<td style="padding: 10px; text-align: right;">600</td>
<td style="padding: 10px;">Проездной на месяц</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Четверг</td>
<td style="padding: 10px;">Лекарства</td>
<td style="padding: 10px; text-align: right;">450</td>
<td style="padding: 10px;">Аптека №3</td>
</tr>
<tr style="background-color: #ffeb3b; font-weight: bold;">
<td style="padding: 10px;" colspan="2">ИТОГО за неделю:</td>
<td style="padding: 10px; text-align: right;">8 140</td>
<td style="padding: 10px;">-</td>
</tr>
</table>
</div>


<div class="example-section">
<h2>🎯 Практическое задание</h2>

<div class="note">
<strong>📝 Задание:</strong> Создайте свою собственную таблицу. Вы можете использовать шаблоны ниже или придумать свой вариант.
</div>

<h3>Вариант А: Моё личное расписание</h3>
<div class="code-example">

<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #9C27B0; color: white;">
<th style="padding: 12px;">День недели</th>
<th style="padding: 12px;">Время</th>
<th style="padding: 12px;">Моё занятие</th>
</tr>
<tr>
<td style="padding: 10px;"></td>
<td style="padding: 10px;"></td>
<td style="padding: 10px;"></td>
</tr>
</table>
</div>

<h3>Вариант Б: Мои расходы</h3>
<div class="code-example">

<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #FF9800; color: white;">
<th style="padding: 12px;">Дата</th>
<th style="padding: 12px;">На что потратил(а)</th>
<th style="padding: 12px;">Сумма</th>
</tr>
<tr>
<td style="padding: 10px;"></td>
<td style="padding: 10px;"></td>
<td style="padding: 10px;"></td>
</tr>
</table>
</div>
</div>


<div class="example-section">
<h2>💡 Советы для лучших таблиц</h2>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
<div style="border: 2px solid #4CAF50; padding: 15px; border-radius: 8px;">
<h3 style="color: #4CAF50; margin-top: 0;">🎨 Чередуйте строки</h3>
<p>Добавляйте разный фон для четных и нечетных строк — так таблицу легче читать.</p>
<code>style="background-color: #f9f9f9;"</code>
</div>

<div style="border: 2px solid #2196F3; padding: 15px; border-radius: 8px;">
<h3 style="color: #2196F3; margin-top: 0;">📐 Выравнивайте числа</h3>
<p>Числа в столбцах выравнивайте по правому краю — так их проще сравнивать.</p>
<code>style="text-align: right;"</code>
</div>

<div style="border: 2px solid #FF9800; padding: 15px; border-radius: 8px;">
<h3 style="color: #FF9800; margin-top: 0;">📊 Добавляйте итоги</h3>
<p>Для таблиц с числами всегда добавляйте строку с итоговой суммой.</p>
<code>colspan="2"</code>
</div>
</div>
</div>


<div class="example-section">
<h2>📋 Шпаргалка по тегам таблиц</h2>

<table border="1" class="demo-table">
<tr style="background-color: #607D8B; color: white;">
<th style="padding: 12px;">Тег</th>
<th style="padding: 12px;">Описание</th>
<th style="padding: 12px;">Пример</th>
</tr>
<tr>
<td style="padding: 10px;"><code><table></code></td>
<td style="padding: 10px;">Создает таблицу</td>
<td style="padding: 10px;"><code><table border="1"></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;"><code><tr></code></td>
<td style="padding: 10px;">Создает строку таблицы</td>
<td style="padding: 10px;"><code><tr>...</tr></code></td>
</tr>
<tr>
<td style="padding: 10px;"><code><th></code></td>
<td style="padding: 10px;">Заголовок столбца (жирный)</td>
<td style="padding: 10px;"><code><th>День</th></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;"><code><td></code></td>
<td style="padding: 10px;">Обычная ячейка с данными</td>
<td style="padding: 10px;"><code><td>Понедельник</td></code></td>
</tr>
</table>
</div>
</body>
</html>

Часть 8: Что Вы теперь умеете

✅ Создавать полезные таблицы для повседневных нужд
✅ Проектировать структуру таблицы под конкретную задачу
✅ Добавлять заголовки, данные и примечания
✅ Использовать чередование цветов для удобства чтения
✅ Вычислять и показывать итоговые суммы
✅ Применять colspan для объединения ячеек

Часть 9: Следующие шаги

🚀 Для дальнейшего развития:

• Добавьте в таблицу раскрывающиеся подробности
• Создайте таблицу с изображениями (расписание с фото преподавателей)
• Сделайте интерактивную таблицу с возможностью сортировки
• Добавьте подсветку важных строк (например, самые крупные расходы)

💪 Практикуйтесь!

Создайте таблицу для:
• Списка дней рождения родных
• Графика приема лекарств
• Плана ухода за растениями
• Расписания телепередач

Помните: Лучшая таблица — та, которую Вы действительно используете! 🎯

- * * * -

Часть 4:
Важные мелочи и публикация сайта

Глава 10: Комментарии в коде — "записки для себя"

10.1. Что такое комментарий  и зачем он нужен

Введение: Заметки для себя и других разработчиков

Представьте, что Вы читаете книгу и делаете пометки на полях: "важная мысль", "вернуться к этому позже", "спросить у Марии". Комментарии в HTML — это такие же пометки, но в Вашем коде! Они не видны посетителям сайта, но очень помогают Вам и другим разработчикам разбираться в структуре страницы.

Часть 1: Базовый синтаксис комментариев

Комментарий в HTML создается с помощью специальных символов . Все, что находится между ними, браузер игнорирует.

html

Как это работает:

<!-- — начало комментария

Текст комментария — содержимое, которое не отображается

--> — конец комментария

Часть 2: Практические примеры комментариев

Пример 1: Однострочный комментарий

html


<nav>
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>

Пример 2: Многострочный комментарий

html


<div class="contacts">
<p>Телефон: +7 (123) 456-78-90</p>
</div>

Пример 3: Комментарий в середине строки

html

<h1>Заголовок страницы </h1>

Часть 3: Основные причины использовать комментарии

Давайте рассмотрим, зачем вообще нужны комментарии, на конкретных примерах.

Причина 1: Объяснение сложного кода

html


<div class="price">
Базовая цена: <span id="basePrice">1000</span> руб.<br>
Скидка: <span id="discount">15</span>%<br>
Итоговая цена: <span id="finalPrice">850</span> руб.
</div>

Причина 2: Разметка разделов страницы

html


<header>

<div class="logo">Мой Сайт</div>


<nav class="main-menu">...</nav>
</header>


<main>

<section class="welcome">...</section>


<section class="news">...</section>
</main>


<footer>...</footer>

Причина 3: Временное отключение кода

html



<nav>
<a href="#">Главная</a>
<a href="#">Новости</a>
<a href="#">Контакты</a>
</nav>

Причина 4: Помощь в командной работе

html


<section class="promotions">

<div class="promo-item">...</div>
</section>

Часть 4: Полная страница с примерами комментариев

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика: Комментарии в HTML</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #2c3e50;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.warning {
background: #fff3e0;
padding: 15px;
border-left: 4px solid #ff9800;
margin: 15px 0;
border-radius: 5px;
}
.comment-demo {
background: #f0fff0;
border-left: 4px solid #4CAF50;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>💬 Комментарии в HTML: Ваши заметки в коде</h1>

<div class="note">
<strong>💡 Основная идея:</strong> Комментарии — это заметки в коде, которые видны только разработчикам. Посетители сайта их не увидят, но они помогут Вам и Вашей команде понимать структуру страницы.
</div>


<div class="example-section">
<h2>1. Как выглядят комментарии</h2>

<div class="code-example">



-->

<div>
Этот текст увидят пользователи

</div>
</div>

<div class="comment-demo">
<strong>Результат в браузере:</strong><br>
Этот текст увидят пользователи
</div>
</div>


<div class="example-section">
<h2>2. Комментарии в реальном проекте</h2>

<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой сайт - Главная</title>

<link rel="stylesheet" href="style.css">
</head>
<body>

<header>

<div class="logo">МойСайт.ру</div>


<nav class="main-nav">
<a href="#">Главная</a>
<a href="#">О нас</a>

<a href="#">Контакты</a>
</nav>
</header>


<main>

<section class="promo-banner">

<h1>Специальное предложение!</h1>
</section>


<section class="products">

<div class="product">
<h3>Название товара 1</h3>
<p>Описание товара</p>

<span class="price">1000 руб.</span>
</div>


<div class="product">
<h3>Название товара 2</h3>
<p>Описание товара</p>
<span class="price">1500 руб.</span>
</div>
</section>
</main>


<footer>

<div class="contacts">
Телефон: +7 (123) 456-78-90
</div>

</footer>
</body>
</html>
</div>
</div>


<div class="example-section">
<h2>3. Временное отключение элементов</h2>

<div class="code-example">

<nav>
<a href="#home">Главная</a>
<a href="#about">О нас</a>
<a href="#contact">Контакты</a>
</nav>




</div>

<div class="note">
<strong>📝 Примечание:</strong> Закомментированный код не удаляется, а просто временно отключается. Это удобно для тестирования или если Вы хотите сохранить старую версию на случай отката.
</div>
</div>


<div class="example-section">
<h2>4. Комментарии для отладки</h2>

<div class="code-example">
<div class="user-profile">



<h2>Профиль пользователя</h2>
<div class="user-info">

<div class="avatar">Фото</div>


<div class="name">Иван Петров</div>
<div class="email">ivan@example.com</div>
</div>


<button class="save-btn">Сохранить изменения</button>
</div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 15px 0;">
<div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;">
<strong style="color: #4CAF50;">TODO</strong><br>Запланированная задача
</div>
<div style="border: 2px solid #FF9800; padding: 10px; border-radius: 5px;">
<strong style="color: #FF9800;">FIXME</strong><br>Требуется исправление
</div>
<div style="border: 2px solid #F44336; padding: 10px; border-radius: 5px;">
<strong style="color: #F44336;">BUG</strong><br>Обнаруженная ошибка
</div>
<div style="border: 2px solid #2196F3; padding: 10px; border-radius: 5px;">
<strong style="color: #2196F3;">NOTE</strong><br>Важное примечание
</div>
</div>
</div>


<div class="example-section">
<h2>5. Что нельзя делать с комментариями</h2>

<div class="warning">
<strong>⚠️ Внимание!</strong> Эти примеры показывают неправильное использование комментариев.
</div>

<h3>Ошибка 1: Незакрытый комментарий</h3>
<div class="code-example">
 class="header">
Содержимое
</div>
</div>

<h3>Ошибка 3: Вложенные комментарии</h3>
<div class="code-example">

Текст между комментариями
-->
</div>

<div class="note">
<strong>✅ Правильно:</strong> Комментарии должны быть правильно закрыты и не могут быть вложенными.
</div>
</div>


<div class="example-section">
<h2>🎯 Практическое задание</h2>

<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моё расписание</title>
</head>
<body>
<h1>Моё ежедневное расписание</h1>



<div class="morning">
<h2>Утро</h2>
<ul>
<li>07:00 - Подъем</li>
<li>07:30 - Завтрак</li>
<li>08:30 - Прогулка</li>
</ul>
</div>

<div class="day">
<h2>День</h2>
<ul>
<li>12:00 - Обед</li>
<li>13:00 - Компьютерные курсы</li>
<li>15:00 - Чтение</li>
</ul>
</div>

<div class="evening">
<h2>Вечер</h2>
<ul>
<li>18:00 - Ужин</li>
<li>19:00 - Телевизор</li>
<li>21:00 - Подготовка ко сну</li>
</ul>
</div>
</body>
</html>
</div>

<div class="note">
<strong>📝 Задание:</strong> Добавьте в код выше комментарии, которые:
<ul>
<li>Объясняют структуру страницы</li>
<li>Отмечают наиболее важные дела</li>
<li>Показывают, какие пункты временные</li>
<li>Добавляют заметки для будущих улучшений</li>
</ul>
</div>
</div>


<div class="example-section">
<h2>📋 Шпаргалка по комментариям</h2>

<table border="1" style="border-collapse: collapse; width: 100%; margin: 15px 0;">
<tr style="background-color: #34495e; color: white;">
<th style="padding: 12px;">Синтаксис</th>
<th style="padding: 12px;">Назначение</th>
<th style="padding: 12px;">Пример</th>
</tr>
<tr>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Обычный комментарий</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Многострочный комментарий</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Запланированная задача</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Требуется исправление</td>
<td style="padding: 10px;"><code></code></td>
</tr>
</table>
</div>
</body>
</html>

Часть 6: Что Вы теперь умеете

✅ Понимать назначение HTML-комментариев
✅ Создавать однострочные и многострочные комментарии
✅ Использовать комментарии для разметки разделов страницы
✅ Временно отключать код с помощью комментариев
✅ Добавлять напоминания и задачи (TODO, FIXME)
✅ Избегать распространенных ошибок с комментариями

Часть 7: Итоги и рекомендации

🎯 Ключевые моменты:

Комментарии начинаются с

Они не видны пользователям на странице

Помогают организовать код и работать в команде

Позволяют временно отключать элементы

💡 Профессиональные советы:

Комментируйте структуру — разделяйте комментариями основные блоки страницы

Объясняйте сложные моменты — если код делает что-то неочевидное, добавьте комментарий

Используйте стандартные пометки — TODO для задач, FIXME для исправлений

Не переусердствуйте — хороший код часто понятен и без комментариев

Следите за актуальностью — удаляйте устаревшие комментарии

🚀 Следующие шаги:

Практикуйтесь добавлять комментарии в свои проекты

Используйте разные типы комментариев (разделители, пояснения, задачи)

Научитесь быстро комментировать/раскомментировать код в редакторе

Изучите комментарии в CSS и JavaScript

Помните: Хорошо прокомментированный код — признак заботливого разработчика! 🌟

- * * * -

10.2. Как комментарии помогают не запутаться в своём коде

Введение: Спасательный круг в море кода

Представьте, что Вы открываете старый шкаф с вещами. Если всё аккуратно разложено по полочкам с подписями "летняя одежда", "зимние вещи", "документы" — Вы быстро найдёте нужное. Если же всё свалкой — придётся перерывать каждый угол. Комментарии в коде — это такие же "подписи на полочках", которые помогают быстро ориентироваться и не запутаться.

Часть 1: Проблема — код без комментариев

Давайте посмотрим на реальный пример, как легко запутаться в коде без комментариев.

html

<!DOCTYPE html>
<html>
<head>
<title>Сайт</title>
<style>
.b1 { background: #f0f0f0; padding: 20px; margin: 10px; }
.b2 { border: 1px solid #ccc; border-radius: 5px; }
.b3 { display: flex; justify-content: space-between; }
.c1 { color: #333; font-size: 18px; }
.c2 { color: #666; font-size: 14px; }
</style>
</head>
<body>
<div class="b1 b2">
<div class="b3">
<div class="c1">Текст</div>
<div class="c2">Другой текст</div>
</div>
</div>
<div class="b1">
<div>Ещё текст</div>
</div>
</body>
</html>

Что здесь происходит? Непонятно! Классы с непонятными названиями, непонятная структура. Теперь представим, что этот код написан 3 месяца назад — Вы вообще ничего не вспомните!

Часть 2: Решение — код с комментариями

А теперь тот же код, но с комментариями:

html

<!DOCTYPE html>
<html>
<head>
<title>Сайт компании - Главная</title>
<style>
/* === СТИЛИ ДЛЯ КАРТОЧЕК === */
.card-container {
background: #f0f0f0;
padding: 20px;
margin: 10px;
}
.card-border {
border: 1px solid #ccc;
border-radius: 5px;
}

/* === СТИЛИ ДЛЯ ШАПКИ КАРТОЧКИ === */
.card-header {
display: flex;
justify-content: space-between;
}

/* === ТИПОГРАФИКА === */
.card-title {
color: #333;
font-size: 18px;
}
.card-subtitle {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>

<div class="card-container card-border">

<div class="card-header">
<div class="card-title">iPhone 15</div>
<div class="card-subtitle">85 000 руб.</div>
</div>
</div>


<div class="card-container">
<div>Скидка 10% на все смартфоны</div>
</div>
</body>
</html>

Теперь всё понятно! Комментарии превратили хаос в порядок.

Часть 3: Конкретные способы как комментарии предотвращают путаницу

Способ 1: Разметка крупных блоков

html


<header>

<div class="logo">
<img src="logo.png" alt="Магазин техники">
</div>


<div class="search">
<input type="text" placeholder="Поиск товаров...">
<button>Найти</button>
</div>


<div class="cart">
<span>Корзина (3)</span>
</div>
</header>


<main>

<section class="promo-banner">
<h1>Распродажа до 50%</h1>
</section>


<section class="catalog">

<aside class="filters">

</aside>


<div class="products-grid">

</div>
</section>
</main>


<footer>

<div class="contacts">...</div>


<nav class="footer-nav">...</nav>
</footer>

Способ 2: Объяснение сложной логики

html


<div class="discount-calculator">

<div class="price-inputs">
<label>Базовая цена:</label>
<input type="number" id="basePrice" value="1000">

<label>Скидка %:</label>
<input type="number" id="discount" value="10">
</div>


<div class="result">

Итоговая цена: <span id="finalPrice">900 руб.</span>


<div id="priceNote" class="note">Выгодно!</div>
</div>
</div>

Способ 3: Отслеживание изменений и версий

html


<section class="promotions">

<div class="weekly-promo">
<h2>Акция недели</h2>

<div class="timer" id="promoTimer">05:00:00</div>
</div>


</section>

Часть 4: Полная страница с примерами организации кода

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Как не запутаться в коде: Практика комментариев</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #2c3e50;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.warning {
background: #ffeaa7;
padding: 15px;
border-left: 4px solid #fdcb6e;
margin: 15px 0;
border-radius: 5px;
}
.success {
background: #d1f7d1;
padding: 15px;
border-left: 4px solid #4CAF50;
margin: 15px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>🧭 Комментарии как навигация: Как не заблудиться в своём коде</h1>

<div class="note">
<strong>💡 Основная идея:</strong> Комментарии — это карта Вашего кода. Без них легко заблудиться, особенно когда Вы возвращаетесь к проекту через несколько месяцев или работаете в команде.
</div>


<div class="example-section">
<h2>1. Превращение хаоса в порядок</h2>

<div class="warning">
<strong>❌ БЕЗ КОММЕНТАРИЕВ — ХАОС:</strong>
</div>
<div class="code-example">
<div class="b1">
<div class="c3">
<span class="t2">Заголовок</span>
<div class="b2">
<div class="i1"></div>
<div class="i2"></div>
</div>
</div>
<div class="c4">
<button class="btn1">Кнопка</button>
</div>
</div>
</div>

<div class="success">
<strong>✅ С КОММЕНТАРИЯМИ — ПОРЯДОК:</strong>
</div>
<div class="code-example">

<div class="product-card">


<div class="card-header">
<span class="product-title">Заголовок</span>


<div class="product-meta">
<div class="rating-stars"></div>
<div class="action-icons"></div>
</div>
</div>


<div class="card-actions">
<button class="add-to-cart-btn">Кнопка</button>
</div>
</div>
</div>
</div>


<div class="example-section">
<h2>2. Организация крупного проекта</h2>

<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Интернет-магазин электроники</title>


</head>
<body>

<header class="main-header">

<div class="logo-section">
<img src="logo.png" alt="TechStore">
<h1>TechStore</h1>
</div>


<div class="search-section">

<input type="text" placeholder="Найти товар...">
<button>Поиск</button>
</div>


<div class="user-section">
<div class="cart">Корзина (3)</div>
<div class="user-profile">Профиль</div>
</div>
</header>


<main class="main-content">


<section class="hero-banner">

<h2>Распродажа смартфонов до 40%</h2>
<p>Только до конца недели</p>
</section>


<section class="product-catalog">


<aside class="filter-sidebar">

<div class="price-filter">
<h3>Цена</h3>
<input type="range" min="0" max="100000">
</div>

<div class="brand-filter">
<h3>Бренд</h3>

</div>
</aside>


<div class="products-grid">

<div class="product-card">

<img src="phone1.jpg" alt="iPhone 15">
<h3>iPhone 15</h3>
<span class="price">85 000 руб.</span>
<div class="rating">★★★★☆</div>
<button>В корзину</button>
</div>


<div class="product-card">
<img src="phone2.jpg" alt="Samsung Galaxy">
<h3>Samsung Galaxy S24</h3>
<span class="price">65 000 руб.</span>
<div class="rating">★★★★★</div>
<button>В корзину</button>
</div>


</div>
</section>
</main>


<footer class="main-footer">

<div class="footer-content">
<div class="contacts">
<h3>Контакты</h3>
<p>Телефон: +7 (123) 456-78-90</p>
</div>

<nav class="footer-nav">
<h3>Навигация</h3>
<a href="#">О компании</a>
<a href="#">Доставка</a>
<a href="#">Гарантия</a>
</nav>
</div>
</footer>
</body>
</html>
</div>
</div>


<div class="example-section">
<h2>3. Система пометок для самоорганизации</h2>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0;">
<div style="border: 2px solid #4CAF50; padding: 15px; border-radius: 8px;">
<h3 style="color: #4CAF50; margin-top: 0;">✅ TODO</h3>
<p><strong>Задачи на будущее</strong></p>
<code></code>
<code></code>
</div>

<div style="border: 2px solid #FF9800; padding: 15px; border-radius: 8px;">
<h3 style="color: #FF9800; margin-top: 0;">⚠️ FIXME</h3>
<p><strong>Требует исправления</strong></p>
<code></code>
<code></code>
</div>

<div style="border: 2px solid #F44336; padding: 15px; border-radius: 8px;">
<h3 style="color: #F44336; margin-top: 0;">🐛 BUG</h3>
<p><strong>Обнаруженные ошибки</strong></p>
<code></code>
<code></code>
</div>

<div style="border: 2px solid #2196F3; padding: 15px; border-radius: 8px;">
<h3 style="color: #2196F3; margin-top: 0;">💡 NOTE</h3>
<p><strong>Важные заметки</strong></p>
<code></code>
<code></code>
</div>
</div>

<div class="code-example">
<div class="user-profile">





<div class="avatar">

<img src="default-avatar.jpg" alt="Аватар">
</div>

<div class="user-info">

<input type="email" placeholder="Email">


<input type="password" placeholder="Пароль">
</div>
</div>
</div>
</div>


<div class="example-section">
<h2>4. Управление версиями и экспериментами</h2>

<div class="code-example">
<div class="payment-system">


<h3>Способы оплаты</h3>


<div class="active-methods">

<div class="payment-method">
<img src="visa-mc.png" alt="Карты">
<span>Банковская карта</span>
</div>


<div class="payment-method">
<img src="paypal.png" alt="PayPal">
<span>PayPal</span>
</div>


<div class="payment-method">
<img src="sbp.png" alt="СБП">
<span>СБП</span>
</div>
</div>



<div class="payment-method">
<img src="google-pay.png" alt="Google Pay">
<span>Google Pay</span>
</div>


<div class="payment-method">
<img src="apple-pay.png" alt="Apple Pay">
<span>Apple Pay</span>
</div>
</div>
-->



<div class="payment-method">
<img src="crypto.png" alt="Crypto">
<span>Криптовалюты</span>
</div>
</div>
-->
</div>
</div>
</div>


<div class="example-section">
<h2>🎯 Практическое задание: Наведите порядок в коде</h2>

<div class="code-example">
<!DOCTYPE html>
<html>
<head>
<title>Сайт</title>
<style>
.s1 { max-width: 1200px; margin: 0 auto; padding: 20px; }
.h1 { background: #2c3e50; color: white; padding: 20px; }
.c1 { display: flex; justify-content: space-between; }
.n1 { display: flex; gap: 20px; }
.m1 { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; margin: 40px 0; }
.f1 { background: #34495e; color: white; padding: 30px; margin-top: 50px; }
</style>
</head>
<body>
<div class="s1">
<div class="h1">
<div class="c1">
<div>Лого</div>
<div class="n1">
<div>Главная</div>
<div>О нас</div>
<div>Услуги</div>
<div>Контакты</div>
</div>
</div>
</div>

<div class="m1">
<div>
<h3>Категории</h3>
<ul>
<li>Категория 1</li>
<li>Категория 2</li>
<li>Категория 3</li>
</ul>
</div>
<div>
<h2>Заголовок</h2>
<p>Текст страницы...</p>
</div>
</div>

<div class="f1">
<div>Телефон: +7 (123) 456-78-90</div>
<div>Email: info@site.ru</div>
</div>
</div>
</body>
</html>
</div>

<div class="note">
<strong>📝 Задание:</strong> Добавьте комментарии в код выше, чтобы:
<ul>
<li>Разметить основные разделы страницы</li>
<li>Объяснить назначение каждого блока</li>
<li>Добавить TODO для улучшений</li>
<li>Создать систему пометок для будущих изменений</li>
</ul>
</div>
</div>


<div class="example-section">
<h2>📋 Шпаргалка по организации кода</h2>

<table border="1" style="border-collapse: collapse; width: 100%; margin: 15px 0;">
<tr style="background-color: #34495e; color: white;">
<th style="padding: 12px;">Ситуация</th>
<th style="padding: 12px;">Как комментировать</th>
<th style="padding: 12px;">Пример</th>
</tr>
<tr>
<td style="padding: 10px;">Разделы страницы</td>
<td style="padding: 10px;">Разделители с ===</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Сложная логика</td>
<td style="padding: 10px;">Подробное объяснение</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr>
<td style="padding: 10px;">Будущие задачи</td>
<td style="padding: 10px;">TODO пометки</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Проблемы</td>
<td style="padding: 10px;">FIXME/BUG пометки</td>
<td style="padding: 10px;"><code></code></td>
</tr>
<tr>
<td style="padding: 10px;">Временное отключение</td>
<td style="padding: 10px;">Закомментировать блок</td>
<td style="padding: 10px;"><code></code></td>
</tr>
</table>
</div>
</body>
</html>

Часть 5: Что Вы теперь умеете

✅ Превращать хаотичный код в структурированный
✅ Создавать навигацию по коду с помощью комментариев
✅ Использовать систему пометок (TODO, FIXME, BUG)
✅ Отслеживать историю изменений в коде
✅ Временно отключать код без его удаления
✅ Объяснять сложную логику для себя и других

Часть 6: Итоги и рекомендации

🎯 Ключевые принципы организации кода:

Комментируйте разделы — используйте визуальные разделители

Объясняйте сложное — если логика неочевидна, добавьте комментарий

Отмечайте задачи — используйте TODO для планирования

Фиксируйте проблемы — FIXME и BUG для отслеживания ошибок

Ведите историю — комментарии с датами и авторами изменений

💡 Профессиональные привычки:

Комментируйте по мере написания — не откладывайте "на потом"

Обновляйте комментарии — устаревшие комментарии хуже их отсутствия

Используйте единый стиль — договоритесь о правилах в команде

Не комментируйте очевидное —  у кнопки излишне

🚀 Результат правильного комментирования:

Возвращаться к коду через месяцы и сразу понимать его

Работать в команде без лишних вопросов "а что это?"

Быстро находить и исправлять проблемы

Экономить время на понимании собственного кода

Помните: Хорошо организованный код с комментариями

**- * * * -

10.3. Практика: добавляем комментарии в свой код, чтобы объяснить, что делает каждый раздел**

Введение: Превращаем код в понятную инструкцию

Сегодня мы возьмём реальный HTML-код и превратим его из "чёрного ящика" в хорошо документированную инструкцию. Вы научитесь комментировать каждый раздел так, чтобы даже новичок мог понять структуру и назначение всех элементов страницы.

Часть 1: Исходный код без комментариев

Давайте начнём с типичной страницы, которая есть у многих пенсионеров — страницы с расписанием и полезными ссылками.

html

<!DOCTYPE html>
<html>
<head>
<title>Мой ежедневник</title>
<style>
body { font-family: Arial; max-width: 800px; margin: 0 auto; padding: 20px; }
.header { background: #2c3e50; color: white; padding: 20px; text-align: center; }
.nav { background: #34495e; padding: 15px; }
.nav a { color: white; margin: 0 15px; text-decoration: none; }
.main { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin: 20px 0; }
.sidebar { background: #ecf0f1; padding: 20px; border-radius: 5px; }
.content { padding: 20px; }
.schedule { border-collapse: collapse; width: 100%; }
.schedule th, .schedule td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.schedule th { background: #3498db; color: white; }
.footer { background: #7f8c8d; color: white; text-align: center; padding: 20px; margin-top: 30px; }
.links li { margin: 10px 0; }
</style>
</head>
<body>
<div class="header">
<h1>Мой ежедневник</h1>
<p>Органайзер для пенсионера</p>
</div>

<div class="nav">
<a href="#schedule">Расписание</a>
<a href="#links">Полезные ссылки</a>
<a href="#contacts">Контакты</a>
</div>

<div class="main">
<div class="sidebar">
<h3>Ближайшие события</h3>
<ul>
<li>Посещение врача - 15:00</li>
<li>Встреча с друзьями - 18:00</li>
<li>Приём лекарств - 20:00</li>
</ul>

<h3>Быстрые заметки</h3>
<textarea placeholder="Запишите важное..." rows="4" style="width: 100%;"></textarea>
</div>

<div class="content">
<h2>Моё расписание на неделю</h2>
<table class="schedule">
<tr>
<th>День</th>
<th>Время</th>
<th>Занятие</th>
<th>Место</th>
</tr>
<tr>
<td>Понедельник</td>
<td>10:00-11:30</td>
<td>Йога</td>
<td>Спортзал</td>
</tr>
<tr>
<td>Вторник</td>
<td>14:00-16:00</td>
<td>Компьютерные курсы</td>
<td>Библиотека</td>
</tr>
<tr>
<td>Среда</td>
<td>11:00-12:30</td>
<td>Танцы</td>
<td>Клуб</td>
</tr>
</table>

<h2>Полезные ссылки</h2>
<ul class="links">
<li><a href="#">Госуслуги</a></li>
<li><a href="#">Социальные службы</a></li>
<li><a href="#">Поликлиника</a></li>
<li><a href="#">Аптека</a></li>
</ul>
</div>
</div>

<div class="footer">
<p>Телефон: +7 (123) 456-78-90 | Email: pensioner@example.com</p>
<p>© 2024 Мой ежедневник. Все права защищены.</p>
</div>
</body>
</html>

Проблема: Код работает, но через месяц Вы забудете, зачем создавали каждый блок и как он работает!

Часть 2: Пошаговое комментирование кода

Теперь давайте превратим этот код в хорошо документированную страницу.

html

<!DOCTYPE html>
<html>
<head>

<title>Мой ежедневник - Органайзер для пенсионера</title>
<meta charset="utf-8">


<style>
/* ОСНОВНЫЕ НАСТРОЙКИ СТРАНИЦЫ */
body {
font-family: Arial, sans-serif; /* Шрифт для лучшей читаемости */
max-width: 800px; /* Ограничение ширины для удобства чтения */
margin: 0 auto; /* Центрирование страницы */
padding: 20px; /* Отступы от краёв */
background-color: #f9f9f9; /* Светлый фон для уменьшения нагрузки на глаза */
}

/* ШАПКА САЙТА */
.header {
background: #2c3e50; /* Тёмно-синий цвет для контраста */
color: white;
padding: 20px;
text-align: center;
border-radius: 5px 5px 0 0; /* Закругленные углы сверху */
}

/* НАВИГАЦИОННОЕ МЕНЮ */
.nav {
background: #34495e; /* Чуть светлее шапки */
padding: 15px;
text-align: center;
}
.nav a {
color: white;
margin: 0 15px;
text-decoration: none; /* Убираем подчёркивание у ссылок */
font-weight: bold;
}
.nav a:hover {
text-decoration: underline; /* Подчёркиваем при наведении */
}

/* ОСНОВНАЯ ОБЛАСТЬ КОНТЕНТА */
.main {
display: grid; /* Используем CSS Grid для разметки */
grid-template-columns: 1fr 2fr; /* Боковая панель:контент = 1:2 */
gap: 20px; /* Расстояние между колонками */
margin: 20px 0;
}

/* БОКОВАЯ ПАНЕЛЬ */
.sidebar {
background: #ecf0f1; /* Светло-серый фон */
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Лёгкая тень для объёма */
}

/* ОСНОВНОЕ СОДЕРЖИМОЕ */
.content {
padding: 20px;
background: white; /* Белый фон для контента */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ТАБЛИЦА РАСПИСАНИЯ */
.schedule {
border-collapse: collapse; /* Убираем двойные границы */
width: 100%;
}
.schedule th, .schedule td {
border: 1px solid #ddd; /* Светло-серые границы */
padding: 12px;
text-align: left;
}
.schedule th {
background: #3498db; /* Синий фон для заголовков */
color: white;
}
.schedule tr:nth-child(even) {
background: #f2f2f2; /* Чередование цвета строк для удобства чтения */
}

/* ПОДВАЛ САЙТА */
.footer {
background: #7f8c8d; /* Серый цвет */
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
border-radius: 0 0 5px 5px; /* Закругленные углы снизу */
}

/* СПИСОК ССЫЛОК */
.links li {
margin: 10px 0;
}
.links a {
color: #2980b9; /* Синий цвет ссылок */
text-decoration: none;
}
.links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<div class="header">
<h1>Мой ежедневник</h1>
<p>Органайзер для пенсионера</p>

</div>


<div class="nav">

<a href="#schedule">Расписание</a>
<a href="#links">Полезные ссылки</a>
<a href="#contacts">Контакты</a>

</div>


<div class="main">

<div class="sidebar">

<h3>Ближайшие события</h3>
<ul>
<li>Посещение врача - 15:00</li>
<li>Встреча с друзьями - 18:00</li>
<li>Приём лекарств - 20:00</li>

</ul>


<h3>Быстрые заметки</h3>

<textarea placeholder="Запишите важное..." rows="4" style="width: 100%;"></textarea>
</div>


<div class="content">

<h2 id="schedule">Моё расписание на неделю</h2>

<table class="schedule">
<tr>
<th>День</th>
<th>Время</th>
<th>Занятие</th>
<th>Место</th>
</tr>

<tr>
<td>Понедельник</td>
<td>10:00-11:30</td>
<td>Йога</td>
<td>Спортзал</td>
</tr>

<tr>
<td>Вторник</td>
<td>14:00-16:00</td>
<td>Компьютерные курсы</td>
<td>Библиотека</td>
</tr>

<tr>
<td>Среда</td>
<td>11:00-12:30</td>
<td>Танцы</td>
<td>Клуб</td>
</tr>

</table>


<h2 id="links">Полезные ссылки</h2>

<ul class="links">
<li><a href="https://gosuslugi.ru" target="_blank">Госуслуги</a></li>
<li><a href="https://szn.gov.ru" target="_blank">Социальные службы</a></li>
<li><a href="#">Поликлиника № 123</a></li>
<li><a href="#">Аптека "Здоровье"</a></li>

</ul>
</div>
</div>


<div class="footer" id="contacts">

<p>Телефон: +7 (123) 456-78-90 | Email: pensioner@example.com</p>
<p>© 2024 Мой ежедневник. Все права защищены.</p>

</div>


</body>
</html>

Часть 3: Полная страница с практическими заданиями

html

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Практика: Комментирование HTML-кода</title>
<meta charset="utf-8">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #2c3e50;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.practice-task {
background: #fff3e0;
padding: 20px;
border-left: 4px solid #ff9800;
margin: 20px 0;
border-radius: 5px;
}
.comment-example {
background: #f0fff0;
padding: 10px;
margin: 10px 0;
border-left: 4px solid #4CAF50;
}
</style>
</head>
<body>
<h1>📝 Практика: Добавляем комментарии в свой код</h1>

<div class="note">
<strong>🎯 Цель урока:</strong> Научиться комментировать каждый раздел кода так, чтобы через полгода Вы могли легко понять, что делает каждая часть страницы и зачем она нужна.
</div>


<div class="example-section">
<h2>1. Пример правильно закомментированного кода</h2>

<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой садовый дневник</title>


<link rel="stylesheet" href="style.css">
</head>
<body>

<header class="main-header">

<div class="logo">
<h1>Мой садовый дневник</h1>
<p>Учёт растений и работ в саду</p>
</div>


<nav class="main-nav">
<a href="#plants">Мои растения</a>
<a href="#schedule">График работ</a>
<a href="#notes">Заметки</a>
</nav>
</header>


<main class="main-content">


<section id="plants" class="plants-section">
<h2>Мои растения</h2>


<div class="plants-grid">

<div class="plant-card">
<h3>Помидоры</h3>

<p><strong>Посажены:</strong> 15 мая 2024</p>
<p><strong>Полив:</strong> Каждый день</p>

</div>


<div class="plant-card">
<h3>Огурцы</h3>
<p><strong>Посажены:</strong> 20 мая 2024</p>
<p><strong>Полив:</strong> Через день</p>
</div>
</div>
</section>
</main>


<footer class="main-footer">

<div class="contact-info">
<p>Телефон: +7 (123) 456-78-90</p>
<p>Участок: Садовое товарищество "Ромашка"</p>
</div>
</footer>


</body>
</html>
</div>
</div>


<div class="practice-task">
<h2>🎯 Практическое задание 1: Комментируем таблицу расходов</h2>

<div class="code-example">
<!DOCTYPE html>
<html>
<head>
<title>Учёт расходов</title>
<style>
body { font-family: Arial; margin: 20px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid #ddd; padding: 8px; }
.table th { background: #4CAF50; color: white; }
.total { font-weight: bold; background: #f2f2f2; }
.income { color: green; }
.expense { color: red; }
</style>
</head>
<body>
<h1>Учёт моих расходов</h1>

<table class="table">
<tr>
<th>Дата</th>
<th>Категория</th>
<th>Описание</th>
<th>Сумма</th>
</tr>
<tr>
<td>01.03.2024</td>
<td>Продукты</td>
<td>Молоко, хлеб, овощи</td>
<td class="expense">850 руб.</td>
</tr>
<tr>
<td>01.03.2024</td>
<td>Пенсия</td>
<td>Ежемесячная пенсия</td>
<td class="income">25 000 руб.</td>
</tr>
<tr class="total">
<td colspan="3">ИТОГО:</td>
<td>24 150 руб.</td>
</tr>
</table>

<div>
<h3>Добавить новую запись</h3>
<form>
<input type="date">
<select>
<option>Продукты</option>
<option>Коммунальные услуги</option>
<option>Транспорт</option>
<option>Пенсия</option>
</select>
<input type="text" placeholder="Описание">
<input type="number" placeholder="Сумма">
<button>Добавить</button>
</form>
</div>
</body>
</html>
</div>

<div class="note">
<strong>📝 Задание:</strong> Добавьте комментарии к этому коду, объясняющие:
<ul>
<li>Назначение каждого раздела страницы</li>
<li>Структуру таблицы расходов</li>
<li>Разные цвета для доходов и расходов</li>
<li>Назначение формы добавления записей</li>
<li>Планы по улучшению (TODO)</li>
</ul>
</div>
</div>


<div class="practice-task">
<h2>🎯 Практическое задание 2: Комментируем страницу с рецептами</h2>

<div class="code-example">
<!DOCTYPE html>
<html>
<head>
<title>Мои рецепты</title>
<style>
.container { max-width: 800px; margin: 0 auto; }
.recipe { border: 1px solid #ddd; padding: 20px; margin: 20px 0; }
.ingredients { background: #f9f9f9; padding: 15px; }
.steps { margin: 15px 0; }
.step { margin: 10px 0; }
.time { color: #666; font-style: italic; }
.difficulty { display: inline-block; padding: 5px 10px; border-radius: 15px; }
.easy { background: #d4edda; color: #155724; }
.medium { background: #fff3cd; color: #856404; }
</style>
</head>
<body>
<div class="container">
<h1>Моя кулинарная книга</h1>

<div class="recipe">
<h2>Борщ</h2>
<div class="time">Время приготовления: 2 часа</div>
<span class="difficulty easy">Простой</span>

<div class="ingredients">
<h3>Ингредиенты:</h3>
<ul>
<li>Свекла - 2 шт</li>
<li>Картофель - 3 шт</li>
<li>Капуста - 200г</li>
<li>Мясо - 400г</li>
</ul>
</div>

<div class="steps">
<h3>Приготовление:</h3>
<div class="step">1. Порезать овощи</div>
<div class="step">2. Сварить мясо</div>
<div class="step">3. Добавить овощи</div>
<div class="step">4. Варить 1.5 часа</div>
</div>
</div>

<div class="recipe">
<h2>Оладьи</h2>
<div class="time">Время приготовления: 30 минут</div>
<span class="difficulty medium">Средний</span>

<div class="ingredients">
<h3>Ингредиенты:</h3>
<ul>
<li>Мука - 2 стакана</li>
<li>Яйца - 2 шт</li>
<li>Молоко - 1 стакан</li>
<li>Сахар - 2 ст. ложки</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</div>

<div class="note">
<strong>📝 Задание:</strong> Добавьте комментарии, которые объяснят:
<ul>
<li>Структуру карточки рецепта</li>
<li>Систему обозначения сложности приготовления</li>
<li>Разделение на ингредиенты и шаги приготовления</li>
<li>Идеи для будущих улучшений</li>
</ul>
</div>
</div>


<div class="example-section">
<h2>📋 Шпаргалка: Что комментировать в коде</h2>

<table border="1" style="border-collapse: collapse; width: 100%; margin: 15px 0;">
<tr style="background-color: #34495e; color: white;">
<th style="padding: 12px;">Что комментировать</th>
<th style="padding: 12px;">Пример комментария</th>
<th style="padding: 12px;">Зачем нужно</th>
</tr>
<tr>
<td style="padding: 10px;">Крупные разделы</td>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Быстрая навигация по коду</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Сложная логика</td>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Объяснение не очевидных моментов</td>
</tr>
<tr>
<td style="padding: 10px;">Назначение классов</td>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Понимание структуры стилей</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">Будущие улучшения</td>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Планирование развития</td>
</tr>
<tr>
<td style="padding: 10px;">Проблемные места</td>
<td style="padding: 10px;"><code></code></td>
<td style="padding: 10px;">Отслеживание ошибок</td>
</tr>
</table>

<div class="comment-example">
<h3>🎨 Пример хорошего комментария:</h3>
<code></code>
</div>
</div>
</body>
</html>

Часть 4: Что Вы теперь умеете

✅ Комментировать структуру HTML-страницы
✅ Объяснять назначение каждого раздела
✅ Добавлять TODO-заметки для будущих улучшений
✅ Отмечать проблемные места (FIXME, BUG)
✅ Создавать навигацию по коду с помощью комментариев
✅ Делать код понятным для себя и других

Часть 5: Итоги и рекомендации

🎯 Ключевые принципы комментирования:

Комментируйте разделы — используйте визуальные разделители для крупных блоков

Объясняйте сложное — если логика не очевидна, добавьте пояснение

Отмечайте задачи — используйте TODO для планирования улучшений

Фиксируйте проблемы — FIXME и BUG для отслеживания ошибок

Описывайте назначение — зачем нужен этот блок, что он делает

💡 Практические советы:

Комментируйте по ходу написания — не откладывайте "на потом"

Используйте единый стиль — договоритесь с собой о правилах

Обновляйте комментарии — устаревшие комментарии вводят в заблуждение

Не бойтесь подробностей — лучше больше объяснений, чем меньше

🚀 Результат правильного комментирования:

Через полгода вы поймёте свой код с первого взгляда

Другие люди смогут разобраться в Вашем коде

Легче вносить изменения — понимаете последствия

Проще находить ошибки — комментарии подсказывают, что должно работать

Помните: Хорошо закомментированный код — это Ваша личная инструкция, которая всегда подскажет, что Вы делали и зачем! 📝✨

(Продолжение следует)

Учебник по HTML для пенсионеров (часть 4)

Глава 9:Простые таблицы (для наглядности)

9.1. Создаём таблицу: теги <table>, <tr> (строка), <td> (ячейка)

Часть 1: Базовая структура HTML-таблицы

Основные теги таблицы:

Простейшая таблица 2×2:

Часть 2: Визуализация структуры таблицы

Как браузер "видит" таблицу:

Часть 3: Практические примеры таблиц

Пример 1: Расписание полива растений

Пример 2: Список покупок для сада

Пример 3: График занятий HTML

Часть 4: Атрибут border — границы таблицы

Без границ:

С тонкой границей:

С толстой границей:

Часть 5: Полная страница с различными таблицами

Часть 6: Объединение ячеек

Объединение по горизонтали (colspan):

Объединение по вертикали (rowspan):

Часть 7: Практическое задание

Задание 1: Создайте таблицу распорядка дня

Задание 2: Таблица любимых книг

Часть 8: Частые ошибки и лучшие практики

❌ НЕПРАВИЛЬНО:

✅ ПРАВИЛЬНО:

Часть 9: Семантика и доступность

Тег <th> для заголовков:

Scope для скринридеров:

Заключение

- * * * -9.2. Заголовки столбцов в таблице: тег <th>

Часть 1: Что такое тег <th> и зачем он нужен?

Основное назначение:

Визуальная разница:

Часть 2: Сравнение <th> и <td>

Без <th> (неправильно):

С <th> (правильно):

Часть 3: Практические примеры с <th>

Пример 1: Таблица ухода за растениями

Пример 2: Расписание занятий

Пример 3: Список покупок для сада

Часть 4: Атрибут scope — для улучшения доступности

Что такое scope:

scope="col" — заголовок столбца:

scope="row" — заголовок строки:

Часть 5: Полная страница с семантическими таблицами

Часть 6: Стилизация заголовков <th>

Базовые CSS-стили:

Разные цвета для разных типов заголовков:

Часть 7: Лучшие практики и частые ошибки

✅ ПРАВИЛЬНО:

❌ НЕПРАВИЛЬНО:

Часть 8: Доступность для скринридеров

Как скринридеры читают таблицы:

Правильная структура для доступности:

Часть 9: Практическое задание для закрепления

Задание: Создайте таблицу ваших увлечений

Заключение

- * * * -9.3. Простая рамка для таблицы

Часть 1: Базовые способы создания рамки

Способ 1: Атрибут border (самый простой)

Разные значения border:

Часть 2: CSS-стили для продвинутого оформления

Способ 2: CSS свойство border

Разбор CSS border:

Часть 3: Различные стили рамок

Сплошная рамка (solid):

Пунктирная рамка (dashed):

Точечная рамка (dotted):

Двойная рамка (double):

Часть 4: Полная страница с примерами рамок

Часть 5: Важные CSS-свойства для рамок

border-collapse — объединение границ

Сравнение:

Часть 6: Практическое задание

Задание 1: Создайте таблицу с разными рамками

Часть 7: Частые ошибки и решения

Ошибка 1: Двойные границы

Ошибка 2: Невидимая таблица

Ошибка 3: Слишком толстая рамка

Глава 9:
Простые таблицы (для наглядности)

- * * * -

9.2. Заголовки столбцов в таблице: тег <th>

- * * * -

9.3. Простая рамка для таблицы