Простые таблицы
Простые таблицы
HTML задаёт структуру веб-страницы: заголовки, абзацы, списки, ссылки, изображения и таблицы.
Ключевые понятия
- HTML
- тег
- заголовок
- ссылка
- изображение
- страница
Страница «Обо мне» может содержать h1-заголовок, абзац, список интересов, изображение и ссылку на полезный ресурс.
Сначала прочитайте конспект, затем выполните практику, проверьте себя по вопросам и только после этого отправляйте работу педагогу.
- Для чего нужен тег h1?
- Чем отличается текст страницы от HTML-разметки?
- Какие элементы делают страницу удобной для чтения?
- есть корректная структура HTML
- страница открывается в браузере
- есть обязательные элементы
- текст и оформление читаемые
Дополнительные материалы
Дополнительные материалы и задания из школьного курса. Они помогают потренироваться по теме, но основной результат урока сдаётся через задание ниже.
📝 Практические задания · 2
Простые таблицы
Создание таблиц в HTML
Базовая структура таблицы
html
< table >
< tr >
< td > Ячейка 1 </ td >
< td > Ячейка 2 </ td >
</ tr >
< tr >
< td > Ячейка 3 </ td >
< td > Ячейка 4 </ td >
</ tr >
</ table >
Основные теги таблиц
<table> - контейнер таблицы
<tr> - строка таблицы (table row)
<td> - ячейка таблицы (table data)
<th> - заголовочная ячейка (table header)
<caption> - заголовок таблицы
Цвет фона и границ
Цвет фона ячеек
< td bgcolor = " red " > Красный фон </ td >
< td bgcolor = " #FF0000 " > Красный фон (HEX) </ td >
< td bgcolor = " rgb(255,0,0) " > Красный фон (RGB) </ td >
Объединение ячеек
Объединение по горизонтали
< td colspan = " 2 " > Занимает 2 колонки </ td >
Объединение по вертикали
< td rowspan = " 3 " > Занимает 3 строки </ td >
Задание 1
1
2
3
4
5
6
Задание 2
1
2
3
4
5
6
Задание 3
1
2
3
4
5
6
7
Таблички - синички
Создание таблиц в HTML
Базовая структура таблицы
html
< table >
< tr >
< td > Ячейка 1 </ td >
< td > Ячейка 2 </ td >
</ tr >
< tr >
< td > Ячейка 3 </ td >
< td > Ячейка 4 </ td >
</ tr >
</ table >
Основные теги таблиц
<table> - контейнер таблицы
<tr> - строка таблицы (table row)
<td> - ячейка таблицы (table data)
<th> - заголовочная ячейка (table header)
<caption> - заголовок таблицы
Атрибуты выравнивания
Выравнивание содержимого
html
< td align = " left " > Слева </ td >
< td align = " center " > По центру </ td >
< td align = " right " > Справа </ td >
< td align = " justify " > По ширине </ td >
< td valign = " top " > Сверху </ td >
< td valign = " middle " > Посередине </ td >
< td valign = " bottom " > Снизу </ td >
Выравнивание таблицы
html
< table align = " left " >
< table align = " center " >
< table align = " right " >
Цвет фона и границ
Цвет фона ячеек
html
< td bgcolor = " red " > Красный фон </ td >
< td bgcolor = " #FF0000 " > Красный фон (HEX) </ td >
< td bgcolor = " rgb(255,0,0) " > Красный фон (RGB) </ td >
Цвет фона строк
html
< tr bgcolor = " lightblue " >
< td > Ячейка 1 </ td >
< td > Ячейка 2 </ td >
</ tr >
Цвет фона всей таблицы
html
< table bgcolor = " lightgray " >
Цвет границ
html
< table bordercolor = " blue " >
< table bordercolor = " #0000FF " >
Размеры таблицы и ячеек
Ширина таблицы
html
< table width = " 500 " >
< table width = " 80% " >
Высота таблицы
html
< table height = " 300 " >
< table height = " 50% " >
Размеры ячеек
html
< td width = " 100 " height = " 50 " >
< td width = " 25% " height = " 10% " >
Границы таблицы
Толщина границ
html
< table border = " 1 " > <!-- Тонкая граница -->
< table border = " 5 " > <!-- Толстая граница -->
< table border = " 0 " > <!-- Без границ -->
Объединение ячеек
Объединение по горизонтали
html
< td colspan = " 2 " > Занимает 2 колонки </ td >
Объединение по вертикали
html
< td rowspan = " 3 " > Занимает 3 строки </ td >
Практический пример
html
< table border = " 2 " bordercolor = " navy " bgcolor = " lightyellow " width = " 80% " align = " center " cellpadding = " 10 " cellspacing = " 5 " >
< caption > < b > Пример таблицы </ b > </ caption >
< tr bgcolor = " lightblue " >
< th width = " 30% " > Заголовок 1 </ th >
< th width = " 40% " > Заголовок 2 </ th >
< th width = " 30% " > Заголовок 3 </ th >
</ tr >
< tr >
< td align = " left " valign = " top " > Слева сверху </ td >
< td align = " center " valign = " middle " > По центру </ td >
< td align = " right " valign = " bottom " > Справа снизу </ td >
</ tr >
< tr >
< td colspan = " 2 " bgcolor = " lightgreen " align = " center " > Объединенная ячейка </ td >
< td rowspan = " 2 " bgcolor = " pink " align = " center " > Вертикальное объединение </ td >
</ tr >
< tr >
< td > Ячейка 1 </ td >
< td > Ячейка 2 </ td >
</ tr >
</ table >
Задание на оценку 3
Расписание уроков
Время Понедельник Вторник Среда Четверг 9:00-9:45 Математика Физика Химия Биология 10:00-10:45 Информатика Математика Физика География 11:00-11:45 Литература История Английский Физкультура
Задание на оценку 4
Успеваемость студентов 8А класса
Студент I четверть II четверть Средний балл Математика Физика Информатика Математика Физика Информатика Иванов А. 5 4 5 5 5 5 4.8 Петрова М. 4 4 5 4 5 5 4.5 Сидоров В. 3 4 4 4 5 4 4.0 Среднее по классу 4.0 4.3 4.7 4.3 5.0 4.7 4.4
Задание на оценку 5
Сравнение компьютерных конфигураций
Модель Основные компоненты Производительность Цена Процессор Память Видеокарта Баллы Уровень Базовая Intel Core i3 8 ГБ DDR4 Intel UHD 1250 Низкий 35 000 ₽ Стандарт Intel Core i5 16 ГБ DDR4 GeForce GTX 1660 3450 Средний 65 000 ₽ Игровая Intel Core i7 32 ГБ DDR5 GeForce RTX 4070 8950 Высокий 125 000 ₽ Профессиональная Intel Core i9 64 ГБ DDR5 GeForce RTX 4090 15600 Максимальный 250 000 ₽ Рекомендовано для программирования: Стандарт