Работа с таблицами в CSS. Часть 2: строки, колонки и размещение
Чтение — около 5 минут· без учёта практики
В первой части урока мы задали ячейкам отступы, объединили рамки и выровняли содержимое. Теперь займёмся таблицей целиком: шириной колонок, строками и столбцами.
Алгоритм размещения: table-layout
По умолчанию браузер размещает таблицу автоматически: ширины колонок зависят от содержимого всех строк, доступного места и заданных размеров. Неразрывное содержимое ограничивает минимальную ширину. Для этого браузер должен прочитать всю таблицу, прежде чем определить окончательный макет, — на больших таблицах это медленно.
Свойство
table-layout
со значением fixed включает фиксированный алгоритм. Ширина колонок зависит только от ширины
таблицы и ширин, заданных колонкам или ячейкам первой строки, а не от содержимого. Браузер начинает показывать
таблицу сразу после первой строки, поэтому фиксированный макет строится быстрее. Для фиксированного алгоритма у
таблицы должна быть задана ширина.
table-layout: попробуйте сами
Обеим таблицам задана ширина 50%. С auto таблица расширилась под длинные числа и вышла за 50%. С fixed колонки равной ширины, а overflow-wrap: break-word переносит числа внутри ячеек. Удалите overflow-wrap — числа выйдут за ячейки, но ширина таблицы не изменится.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Алгоритм размещения таблицы: table-layout</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: 50%;
margin-bottom: 1rem;
overflow-wrap: break-word; /* длинные числа можно переносить */
}
td,
th {
border: 1px solid chocolate;
}
.auto {
table-layout: auto; /* ширина колонок по содержимому (по умолчанию) */
}
.fixed {
table-layout: fixed; /* ширина колонок по ширине таблицы и первой строке */
}
</style>
</head>
<body>
<table class="auto">
<caption>table-layout: auto;</caption>
<tr><th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th></tr>
<tr><td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td></tr>
</table>
<table class="fixed">
<caption>table-layout: fixed;</caption>
<tr><th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th></tr>
<tr><td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td></tr>
</table>
</body>
</html>
Свойство overflow-wrap мы применяли в уроке
«Адаптивная вёрстка. Часть 1»: оно
разрешает переносить длинное слово в произвольном месте, если другого места для переноса нет. В старом коде то же
свойство записывают как word-wrap.
Строки, шапка и подвал
Псевдокласс :nth-child() из урока
«Селекторы. Часть 4» чередует
оформление строк и ячеек — по ключевым словам even и odd или по формуле:
:nth-child() в таблице: попробуйте сами
Таблица на всю ширину с объединёнными рамками. Чётные строки обведены красной рамкой 3px — у строки рамка видна только при collapse. Каждая четвёртая ячейка данных, начиная со второй, — на сиреневом фоне.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Строки и ячейки через :nth-child()</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid;
}
tr:nth-child(even) {
border: 3px solid red; /* чётные строки — рамка строки видна при collapse */
}
td:nth-child(4n + 2) {
background-color: #e8e8ff; /* каждая четвёртая ячейка, начиная со второй */
}
</style>
</head>
<body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th></tr>
<tr><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
Группы строк <thead>, <tbody> и <tfoot> оформляют
отдельно: шапке и подвалу — свой фон, а строкам тела — подсветку при наведении указателя.
Шапка, тело и подвал: попробуйте сами
Шапка на сером фоне, подвал с итогом — на коралловом. Наведите указатель на строку тела: она подсветится целиком. Строки шапки и подвала не подсвечиваются — правило выбирает только tbody tr.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Шапка, тело и подвал таблицы</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid;
}
thead {
background-color: silver;
}
tfoot {
background-color: coral;
}
tbody tr:hover {
background-color: khaki; /* подсвечивается вся строка под указателем */
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Покупка</th><th>Стоимость, ₽</th></tr>
</thead>
<tbody>
<tr><td>Канат с мячиком</td><td>450</td></tr>
<tr><td>Резиновая косточка</td><td>300</td></tr>
<tr><td>Пищащий ёжик</td><td>250</td></tr>
<tr><td>Шлейка</td><td>1 200</td></tr>
</tbody>
<tfoot>
<tr><td>Итого</td><td>2 200</td></tr>
</tfoot>
</table>
</body>
</html>
Подсветка строки помогает читать широкие таблицы мышью, но на сенсорном экране наведения нет. Чередование фона строк работает везде, поэтому для расписаний и прайсов его используют чаще.
Скругление углов
Ячейкам можно задать скругление
border-radius
— в следующем примере заголовочная ячейка при наведении превращается в круг. Прозрачная рамка задана заранее, чтобы
зарезервировать место под рамку, которая появится при наведении: иначе таблица будет «прыгать».
Скругление ячеек: попробуйте сами
Наведите указатель на любую ячейку: она станет синим кругом с оранжевой рамкой, а соседние ячейки не сдвинутся. Удалите прозрачную рамку в правиле th — таблица начнёт дёргаться.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Скругление ячеек при наведении</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
margin: 0 auto;
}
th {
width: 50px;
height: 50px;
border: 5px solid transparent; /* место под рамку зарезервировано заранее */
}
th:hover {
background-color: royalblue;
color: orange;
border-radius: 100%;
border: 5px solid orange;
}
</style>
</head>
<body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
</table>
</body>
</html>
Колонки: colgroup и col
Элементы <colgroup> и <col> описывают колонки таблицы, а атрибут
span у <col> задаёт, сколько колонок подряд он охватывает. Ячейки не лежат внутри
<col>, поэтому оформить колонку можно лишь немногими свойствами: фоном
(background-color), шириной (width), рамкой при объединённых рамках и
visibility: collapse, которое скрывает колонку. Цвет текста и выравнивание на ячейки колонки не
действуют.
colgroup и col: попробуйте сами
Три элемента col описывают четыре колонки: третий охватывает две (span="2"). Фоны заданы через :first-child, :nth-of-type(2) и :last-child — последний col закрашивает третью и четвёртую колонки. Задайте col:first-child цвет текста color: red — ничего не изменится.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Оформление колонок: colgroup и col</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid seagreen;
width: 25%;
}
col:first-child {
background-color: rgb(0 0 0 / 0.3);
}
col:nth-of-type(2) {
background-color: rgb(0 0 0 / 0.2);
}
col:last-child {
background-color: rgb(0 0 0 / 0.1); /* одна колонка на два столбца */
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
<col span="2"> <!-- одна колонка на два столбца: атрибут span="2" -->
</colgroup>
<tr><th>№ заявки</th><th>Услуга</th><th>Цена, ₽</th><th>Итого, ₽</th></tr>
<tr><td>1</td><td>Прогулка</td><td>600</td><td>600</td></tr>
<tr><td>2</td><td>Мытьё лап</td><td>200</td><td>200</td></tr>
<tr><td>3</td><td>Стрижка когтей</td><td>300</td><td>300</td></tr>
<tr><td>4</td><td>Игра с канатом</td><td>150</td><td>150</td></tr>
<tr><td>5</td><td>Чтение сказки</td><td>100</td><td>100</td></tr>
</table>
</body>
</html>
Подсветка столбца при наведении
Подсветить при наведении строку легко — tr:hover. С колонкой так не получится: псевдокласс
:hover у <col> не срабатывает, ведь указатель наводится на ячейку, а не на колонку.
Этот пример сложнее остальных и объединяет материал прошлых уроков: позиционирование, псевдоэлементы и порядок
наложения.
Подсветка столбца: попробуйте сами
Наведите указатель на ячейку данных: её строка станет салатовой, а столбец — тёмно-зелёным, включая заголовок. На пересечении фон строки закрывает подсветку столбца. Наведение на сам заголовок подсветку не включает.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Подсветка строки и столбца при наведении</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: 100%;
border-collapse: collapse;
position: relative; /* точка отсчёта для подсветки столбца */
isolation: isolate; /* подсветка с z-index: -1 остаётся внутри таблицы */
}
td,
th {
border: 1px solid seagreen;
width: 25%;
height: 45px;
}
tr:hover:not(:first-child) {
background-color: lime; /* строка под указателем, кроме строки заголовков */
}
td:hover::after {
content: "";
display: block; /* блок начинается с новой строки — от левого края ячейки */
position: absolute; /* left не задан: блок остаётся там же по горизонтали */
width: 25%;
top: 0;
bottom: 0; /* от верха до низа таблицы */
background-color: forestgreen;
z-index: -1; /* под текстом ячеек */
}
</style>
</head>
<body>
<table>
<tr><th>№ заявки</th><th>Услуга</th><th>Цена, ₽</th><th>Итого, ₽</th></tr>
<tr><td>1</td><td>Прогулка</td><td>600</td><td>600</td></tr>
<tr><td>2</td><td>Мытьё лап</td><td>200</td><td>200</td></tr>
<tr><td>3</td><td>Стрижка когтей</td><td>300</td><td>300</td></tr>
<tr><td>4</td><td>Игра с канатом</td><td>150</td><td>150</td></tr>
<tr><td>5</td><td>Чтение сказки</td><td>100</td><td>100</td></tr>
</table>
</body>
</html>
В этом примере мы:
-
Задали таблице ширину
100%и объединили рамки; ячейки шириной25%и высотой 45 пикселей. -
Подсветили строку под указателем, кроме первой — строки заголовков:
tr:hover:not(:first-child). -
Задали таблице
position: relative: она стала содержащим блоком для абсолютно позиционированного блока подсветки. Без этого блок отсчитывался бы от начального содержащего блока, как мы разбирали в уроке «Позиционирование элементов. Часть 1». -
При наведении на ячейку псевдоэлементом
::afterсо свойствомcontentдобавили блок с фономforestgreenи абсолютным позиционированием. Смещенияtop: 0иbottom: 0растягивают его от верха до низа таблицы, ширина25%равна ширине ячейки. Левое смещение не задано, поэтому по горизонтали блок остаётся там, где стоял бы в потоке, аdisplay: blockначинает его с новой строки — от левого края ячейки, а не после её текста. -
Задали блоку
z-index: -1, чтобы текст ячеек был над ним, а таблице —isolation: isolate: контекст наложения не даёт блоку опуститься ниже фона таблицы. Об этом — в уроке «Позиционирование элементов. Часть 2».
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
Задание
Ожидаемый результат: в таблице «Мой режим дня» строки 08:00 и 19:00 на светлом фоне, остальные — без фона; коричневая шапка со скруглёнными верхними углами.
Выполните задание
Условие задания
css/style.css
/* Общие стили сайта Тони */
/* Ширина и высота включают внутренние отступы и рамку — у всех элементов и псевдоэлементов */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Шрифт заголовков Nunito (лицензия SIL Open Font License): кириллица и латиница в разных файлах */
@font-face {
font-family: "Nunito";
src: url("../assets/nunito-cyrillic-800-normal.woff2") format("woff2");
font-weight: 800;
font-display: swap; /* пока шрифт загружается, текст виден запасным шрифтом */
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Nunito";
src: url("../assets/nunito-latin-800-normal.woff2") format("woff2");
font-weight: 800;
font-display: swap;
unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
body {
background-color: linen;
color: #2b211b; /* цвет для потомков без собственного значения */
font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* системный шрифт устройства */
line-height: 1.6; /* множитель: у каждого элемента интервал от его собственного размера шрифта */
margin: 0; /* убираем отступ браузера: шапка и подвал во всю ширину окна */
}
/* Поля основного содержимого: текст не прижимается к краям окна */
main {
padding: 1.5rem 1rem;
max-width: 68rem; /* на широком экране строки не растягиваются на всё окно */
margin: 0 auto; /* колонка по центру */
}
/* Изображения и видео не шире колонки, пропорции сохраняются */
img,
video {
max-width: 100%;
height: auto;
}
/* Фреймы, аудиоплеер, индикаторы и поля формы не выходят за колонку */
progress,
meter,
iframe,
audio,
input,
select,
textarea,
button {
max-width: 100%;
}
/* Разрешаем группе полей сужаться вместе с колонкой. */
fieldset {
min-width: 0;
}
/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
color: saddlebrown;
font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
font-weight: 800;
line-height: 1.2; /* крупному тексту хватает меньшего интервала */
}
/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
text-align: center;
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
/* Вводный блок главной страницы */
.intro {
background-color: hsl(30, 80%, 95%);
padding: 1.5rem; /* фон вокруг текста; заодно не выпускает margin заголовка за пределы блока */
border-radius: 16px; /* скругляется и фон, хотя рамки нет */
/* Лапка в правом нижнем углу; цвет фона выше остаётся запасным, если картинка не загрузится */
background-image: url("../assets/paw.svg");
background-repeat: no-repeat;
background-position: right 1rem bottom 1rem;
background-size: 4rem;
}
/* Разделы главной — светлые карточки на фоне страницы */
main > section {
background-color: #fffaf3;
border: 1px solid hsl(28, 30%, 82%);
border-radius: 16px;
padding: 1.5rem;
margin-top: 1.5rem;
}
/* Ширина вводных абзацев ограничена 60ch; количество букв в строке зависит от шрифта и текста */
.intro p {
max-width: 60ch;
}
/* Важное предупреждение во вводном блоке — темнее основного акцента */
.intro strong {
color: #6e3510;
}
/* Оглавление главной страницы — переносимый ряд «таблеток» на Flexbox */
.toc {
background-color: white;
border: 1px solid tan;
display: flex;
flex-wrap: wrap; /* «таблетки», которым не хватает места, переходят на новую строку */
gap: 0.5rem; /* промежутки между «таблетками» и между строками */
list-style: none;
padding: 0.75rem;
}
/* Подчёркивание ссылок чуть ниже букв: не задевает выносные элементы */
a {
text-underline-offset: 3px;
}
/* Тонкая линия отделяет шапку от страницы */
header {
border-bottom: 1px solid tan;
}
/* Меню на Flexbox: пункты могут переноситься, промежутки задаёт gap */
nav ul {
margin: 0;
padding: 0.5rem 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
}
/* Ссылка на запись стоит отдельно у правого края: автоматический отступ забирает свободное место */
nav li:last-child {
margin-left: auto;
}
/* Ссылки меню в шапке — селектор потомков */
nav a {
color: saddlebrown;
text-decoration: none;
display: inline-block; /* у строчной ссылки вертикальный padding не раздвигает строку */
padding: 0.4rem 0.9rem;
border-radius: 999px; /* «таблетка»: радиус больше половины высоты */
}
/* Ссылки оглавления главной страницы */
.toc a {
color: #6b5d52; /* тёплый серый: контраст 6.34:1 на белом фоне оглавления */
display: block; /* ссылка заполняет «таблетку» целиком */
padding: 0.25rem 0.75rem;
border: 1px solid tan;
border-radius: 999px;
text-decoration: none;
}
/* Фотографии со скруглёнными углами */
figure img {
border-radius: 8px;
}
figcaption {
color: #6b5d52; /* тёплый серый: контраст 5.64:1 на фоне linen */
font-size: 0.95rem;
}
footer {
background-color: hsl(30, 50%, 90%);
text-align: center;
padding: 1rem;
}
/* Ссылка в подвале берёт цвет текста подвала */
footer a {
color: inherit;
}
/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
font: inherit;
}
/* Ссылки темнеют при наведении указателя */
a:hover {
color: #5c2d0c;
}
/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
}
/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
outline: 3px solid #1f6feb;
outline-offset: 3px;
}
/* Цитата из книги — шрифтом с засечками и курсивом */
blockquote {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
border-left: 4px solid tan; /* черта слева выделяет цитату */
padding-left: 1rem;
}
/* Подпись под цитатой — у правого края */
blockquote + figcaption {
text-align: right;
}
/* Строки формы на Flexbox: подпись — колонка постоянной ширины, поле занимает остаток строки,
а на узком экране переносится под подпись */
fieldset p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
}
fieldset p label {
flex: 0 1 12rem; /* не растёт, но может сжаться в узкой строке */
min-width: 0;
}
fieldset p input,
fieldset p select,
fieldset p textarea {
flex: 1 1 12rem; /* растёт и сжимается от исходной ширины 12rem */
min-width: 0; /* поле может стать уже своего автоматического минимума */
}
/* Фотоальбом на Grid: столько колонок, сколько помещается карточек шириной не меньше 15rem */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1rem;
list-style: none;
padding: 0;
}
.gallery figure {
margin: 0;
}
.gallery img {
width: 100%; /* фото заполняет ширину своей ячейки */
}
/* Список команд: первая колонка подстраивается под текст, оставляя место для перевода. */
dl {
display: grid;
grid-template-columns: fit-content(calc(50% - 0.5rem)) minmax(0, 1fr);
gap: 0.5rem 1rem;
}
dt {
overflow-wrap: anywhere;
grid-column: 1;
font-weight: bold;
}
dd {
grid-column: 2;
overflow-wrap: anywhere; /* длинный перевод переносится внутри своей колонки */
margin: 0; /* браузерный отступ слева больше не нужен: колонку задаёт сетка */
}
/* Длинные слова и адреса переносятся, а не выходят за край узкого экрана */
body {
overflow-wrap: break-word;
}
/* Таблица режима дня на узком экране прокручивается в своей рамке, а не сжимается до нечитаемых колонок */
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
min-width: 28rem;
}
/* Подпись таблицы прокручивается вместе с ней: прижимаем её к началу, чтобы она была видна сразу */
caption {
text-align: left;
}
/* Широкий экран: в разделе «Моя любимая игрушка» фото справа, текст слева.
На узком экране правило не действует, и раздел остаётся одной колонкой. */
@media (width >= 48rem) {
.toy {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
column-gap: 1.5rem;
}
.toy figure {
grid-column: 2;
grid-row: 1 / span 6; /* фото рядом со всеми абзацами раздела */
margin: 0;
}
.toy hr {
width: 100%;
}
}
/* Карточка альбома — точка отсчёта для значка: position: relative не сдвигает её и не меняет поток */
.gallery li {
position: relative;
}
/* Значок «Любимая» в правом верхнем углу карточки; из потока исключён, поэтому фото не сдвигается */
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background-color: saddlebrown;
color: white;
font-size: 0.85rem;
font-weight: bold;
}
/* Шапка прилипает к верхнему краю окна. Фон нужен, чтобы под шапкой не просвечивал текст страницы */
header {
position: sticky;
top: 0;
z-index: 10; /* выше карточек альбома: они тоже позиционированы и записаны в HTML позже шапки */
background-color: linen;
}
/* Липкая шапка должна быть низкой: пункты меню не сжимаются и не переносятся на вторую строку,
а если им не хватает места, меню прокручивается внутри шапки */
nav ul {
flex-wrap: nowrap;
overflow-x: auto;
}
nav li {
flex-shrink: 0;
}
/* Заголовок, к которому ведёт ссылка-якорь, не прячется под липкой шапкой.
В rem: при увеличении текста растут и шапка, и отступ */
[id] {
scroll-margin-top: 4.5rem;
}
/* Ссылка, которая открывается в новой вкладке, помечена стрелкой — посетитель знает, что страница не сменится */
a[target="_blank"]::after {
content: " ↗";
}
/* Ссылка на электронную почту — с конвертом */
a[href^="mailto:"]::before {
content: "✉ ";
}
/* Карточка альбома, в которой есть значок, выделена рамкой — без отдельного класса в HTML */
.gallery li:has(.badge) {
outline: 3px solid tan;
outline-offset: 4px;
border-radius: 8px;
}
/* Первая ссылка меню — «Главная» — подписана лапкой без изменения HTML */
nav li:first-child a::before {
content: "🐾 ";
}
/* Первый абзац вводного блока крупнее остальных. :first-child здесь не подойдёт — первым стоит заголовок h1 */
.intro p:first-of-type {
font-size: 1.2rem;
}
/* Список игрушек: вместо стандартного кружка — косточка */
.toy-list li::marker {
content: "🦴 ";
}
/* Номера шагов в нумерованных списках — в цвет заголовков и жирные; текст пунктов не меняется */
ol li::marker {
color: saddlebrown;
font-weight: bold;
}
/* Таблица режима дня: соседние рамки объединяются в одну линию */
table {
border-collapse: collapse;
}
/* Ячейки с воздухом и линией снизу; текст — от левого края и сверху, даже если в соседней ячейке две строки */
th,
td {
padding: 0.6rem 0.8rem;
border-bottom: 1px solid tan;
text-align: left;
vertical-align: top;
}
/* Шапка таблицы — в цвет заголовков сайта */
thead th {
background-color: saddlebrown;
color: white;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<div class="intro">
<h1 id="top">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
</div>
<ul class="toc">
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section class="toy">
<h2 id="toy">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption>Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2>Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule">Мой режим дня</h2>
<div class="table-wrap" tabindex="0" role="region" aria-label="Режим дня Тони">
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</div>
</section>
<section>
<h2 id="progress">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2>Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
<title>Запись на прогулку с Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
<title>Игрушки Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul class="toy-list">
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul class="gallery">
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
<span class="badge">Любимая</span>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
<title>Где гуляет Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Продолжите в VS Code
Внесите те же правила в css/style.css своего сайта my-site и откройте главную страницу.
Проверка: в режиме устройства на ширине 320 пикселей прокрутите таблицу вбок — чередование и скругление на
месте. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.
Дополнительная задача
Оформите таблицу: шапка и подвал на сером фоне #aaa, строки тела — светло-серые и разделены тонкими
чёрными линиями, текст во всех ячейках по центру. При наведении строка тела становится тёмной с белым текстом.
Используйте отдельные рамки без промежутков (border-collapse: separate; border-spacing: 0) и скруглите четыре крайние ячейки таблицы.
Ожидаемый результат: таблица на всю ширину со скруглёнными углами, серые шапка и подвал, светлые строки тела с линиями; строка под указателем — тёмно-серая с белым текстом.
Дополнительное задание: таблица со скруглёнными углами
Оформите готовую таблицу по образцу: шапка, подвал, строки и скруглённые углы. Замените ??? в CSS.
Условие задания
Подсказка
Разделите оформление thead, tbody и tfoot. border-spacing управляет расстояниями между ячейками, а скругление задаётся угловым ячейкам.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Дополнительное задание</title>
<style>
body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
table {
width: ???;
border-collapse: ???;
border-spacing: ???;
text-align: ???;
}
td {
border-bottom: ???;
background-color: ???;
}
tfoot td {
background-color: ???;
}
tbody tr:hover td {
background-color: ???;
color: ???;
}
/* углы: скругляем крайние ячейки первой и последней строк */
thead th:first-child { border-top-left-radius: ???; }
thead th:last-child { border-top-right-radius: ???; }
tfoot td:first-child { border-bottom-left-radius: ???; }
tfoot td:last-child { border-bottom-right-radius: ???; }
thead th { background-color: ???; }
</style>
</head>
<body>
<table>
<caption>Дополнительное задание</caption>
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
<tfoot>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tfoot>
</table>
</body>
</html>