HTML таблицы

Чтение — около 9 минут· без учёта практики

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

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

Устройство таблицы

Чтобы понять, как составить таблицу, рассмотрим её простейший вариант:

Основное содержимое таблицы заключается в элемент <table>.
Каждая строка таблицы помещается в элемент <tr> (от англ. table row — строка таблицы).
Ячейка заголовка помещается в элемент <th> (table header). По умолчанию её содержимое отображается жирным начертанием и выравнивается по центру.
Каждая ячейка данных помещается в элемент <td> (table data).

Название таблицы, если оно требуется, размещается внутри элемента <caption>. Это необязательный элемент, но если вы его используете, он должен быть первым элементом внутри <table>. Название помогает понять, о чём таблица, ещё до чтения её ячеек, — в том числе программе экранного доступа, которая объявляет его при переходе к таблице.

Без оформления браузер не рисует рамки ячеек. Чтобы они были видны, в примерах у элементов <th> и <td> задан знакомый атрибут style: border: 1px solid gray, он рисует сплошную серую рамку толщиной 1 пиксель. При добавлении ячеек скопируйте в них эти стили, чтобы оформление совпадало.

Элементарная таблица

Добавьте в таблицу четвёртую строку: элемент tr с тремя ячейками td. Затем удалите в любой строке одну ячейку — строка станет короче остальных.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Элементарная таблица</title>
  </head>
  <body>
    <table>
      <caption>Элементарная таблица</caption>
      <tr>
        <th style="border: 1px solid gray">Ячейка заголовка 1</th>
        <th style="border: 1px solid gray">Ячейка заголовка 2</th>
        <th style="border: 1px solid gray">Ячейка заголовка 3</th>
      </tr>
      <tr>
        <td style="border: 1px solid gray">Ячейка данных 1 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 2</td>
      </tr>
      <tr>
        <td style="border: 1px solid gray">Ячейка данных 1 Строка 3</td>
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 3</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 3</td>
      </tr>
    </table>
  </body>
</html>

В старом коде вы можете встретить для рамок атрибут border="1" у элемента <table>. Он устарел: оформлять таблицы правильнее с помощью CSS, и при изучении CSS в уроке «Работа с таблицами в CSS» мы научимся их профессионально стилизовать. В рамках изучения HTML мы научимся грамотно размечать таблицы.

Объединение столбцов

Объединять столбцы в ячейках <td> и <th> можно с помощью атрибута colspan: ячейка растягивается вправо на заданное количество столбцов.

Объединение столбцов

Первая ячейка заголовка растянута на два столбца, поэтому в первой строке всего два элемента th. Измените значение colspan на 3 и удалите вторую ячейку заголовка.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Объединение столбцов</title>
  </head>
  <body>
    <table>
      <caption>Элементарная таблица</caption>
      <tr>
        <th colspan="2" style="border: 1px solid gray">Ячейка заголовка 1</th>
        <th style="border: 1px solid gray">Ячейка заголовка 2</th>
      </tr>
      <tr>
        <td style="border: 1px solid gray">Ячейка данных 1 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 2</td>
      </tr>
      <tr>
        <td style="border: 1px solid gray">Ячейка данных 1 Строка 3</td>
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 3</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 3</td>
      </tr>
    </table>
  </body>
</html>

Объединение строк

Объединять строки в ячейках <td> и <th> можно с помощью атрибута rowspan: ячейка растягивается вниз на заданное количество строк.

Объединение строк

Первая ячейка второй строки занимает и третью строку, поэтому в третьей строке только две ячейки. Удалите атрибут rowspan — третья строка сдвинется влево.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Объединение строк</title>
  </head>
  <body>
    <table>
      <caption>Элементарная таблица</caption>
      <tr>
        <th colspan="2" style="border: 1px solid gray">Ячейка заголовка 1</th>
        <th style="border: 1px solid gray">Ячейка заголовка 2</th>
      </tr>
      <tr>
        <td rowspan="2" style="border: 1px solid gray">Ячейка данных 1 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 2</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 2</td>
      </tr>
      <tr>
        <!-- Первая ячейка этой строки занята ячейкой из предыдущей строки -->
        <td style="border: 1px solid gray">Ячейка данных 2 Строка 3</td>
        <td style="border: 1px solid gray">Ячейка данных 3 Строка 3</td>
      </tr>
    </table>
  </body>
</html>

Заголовки строк и столбцов

Ячейка заголовка <th> может находиться не только в первой строке, но и в начале каждой строки — тогда она называет всю строку. Чтобы явно указать, к чему относится заголовок, используйте атрибут scope: значение col — заголовок столбца, row — заголовок строки.

Заголовки строк и столбцов

Названия дней — заголовки строк (scope="row"), подписи вверху — заголовки столбцов (scope="col"). Добавьте строку для воскресенья с прогулками по 60 минут.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовки строк и столбцов</title>
  </head>
  <body>
    <table>
      <caption>Прогулки Тони за неделю</caption>
      <thead>
        <tr>
          <th scope="col" style="border: 1px solid gray">День</th>
          <th scope="col" style="border: 1px solid gray">Утро, мин</th>
          <th scope="col" style="border: 1px solid gray">Вечер, мин</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" style="border: 1px solid gray">Понедельник</th>
          <td style="border: 1px solid gray">20</td>
          <td style="border: 1px solid gray">40</td>
        </tr>
        <tr>
          <th scope="row" style="border: 1px solid gray">Суббота</th>
          <td style="border: 1px solid gray">60</td>
          <td style="border: 1px solid gray">45</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Зрячий читатель находит значение на пересечении строки и столбца глазами. Программа экранного доступа читает таблицу по ячейкам и, благодаря заголовкам, перед значением «60» объявит «Суббота, Утро, мин». Без заголовков слушатель услышит только число.

Свойства столбцов

Элемент <colgroup> определяет группу из одного или нескольких столбцов таблицы. Он может состоять из одного или нескольких элементов <col>. Элемент <col> определяет свойства одного или нескольких столбцов в пределах <colgroup>. Сам <colgroup> располагается после <caption> и перед строками таблицы.

Атрибут span указывает, сколько столбцов подряд охватывает элемент. Пример задания стилей отдельным столбцам таблицы:

Стили отдельных столбцов

В таблице — услуги груминга для Тони с условными временем и ценами. Первый элемент col с атрибутом span="2" окрашивает столбцы с номером и услугой, следующие — время и цену. Измените span на 1 — хаки останется только у первого столбца.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Услуги груминга для Тони</title>
  </head>
  <body>
    <table>
      <caption>Услуги груминга для Тони</caption>
      <colgroup>
        <col span="2" style="background-color: khaki">
        <col style="background-color: silver">
        <col style="background-color: coral">
      </colgroup>
      <tr>
        <th style="border: 1px solid gray">№</th>
        <th style="border: 1px solid gray">Услуга</th>
        <th style="border: 1px solid gray">Время, мин</th>
        <th style="border: 1px solid gray">Цена, руб.</th>
      </tr>
      <tr>
        <td style="border: 1px solid gray">1</td>
        <td style="border: 1px solid gray">Мытьё и сушка</td>
        <td style="border: 1px solid gray">30</td>
        <td style="border: 1px solid gray">1 200</td>
      </tr>
      <tr>
        <td style="border: 1px solid gray">2</td>
        <td style="border: 1px solid gray">Стрижка когтей</td>
        <td style="border: 1px solid gray">10</td>
        <td style="border: 1px solid gray">400</td>
      </tr>
    </table>
  </body>
</html>

Если всем столбцам группы нужно одно и то же оформление, достаточно указать атрибут span у самого элемента <colgroup>, без вложенных элементов <col>:

Атрибут span у colgroup

В таблице услуг груминга для Тони группа охватывает столбцы с номером и услугой. Измените значение span на 3 — цвет фона распространится и на столбец со временем. Время и цены в примере условные.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Группа столбцов в таблице услуг для Тони</title>
  </head>
  <body>
    <table>
      <caption>Услуги груминга для Тони</caption>
      <colgroup span="2" style="background-color: lime"></colgroup>
      <tr>
        <th style="border: 1px solid gray">№</th>
        <th style="border: 1px solid gray">Услуга</th>
        <th style="border: 1px solid gray">Время, мин</th>
        <th style="border: 1px solid gray">Цена, руб.</th>
      </tr>
      <tr>
        <td style="border: 1px solid gray">1</td>
        <td style="border: 1px solid gray">Мытьё и сушка</td>
        <td style="border: 1px solid gray">30</td>
        <td style="border: 1px solid gray">1 200</td>
      </tr>
      <tr>
        <td style="border: 1px solid gray">2</td>
        <td style="border: 1px solid gray">Стрижка когтей</td>
        <td style="border: 1px solid gray">10</td>
        <td style="border: 1px solid gray">400</td>
      </tr>
    </table>
  </body>
</html>

Ячейки не находятся внутри столбцов, поэтому через <col> и <colgroup> работают лишь немногие свойства: цвет фона, ширина, рамка и видимость столбца. Например, цвет текста столбца так задать не получится.

Разделение таблицы на части

Следующие элементы используются для разделения таблицы на части:

<thead> — «шапка» таблицы: строки с заголовками столбцов (не путайте с заголовками страницы);
<tbody> — «тело» таблицы: основные строки с данными;
<tfoot> — «подвал» таблицы: например, строка с итогами.

Элемент <thead> используется в таблице только один раз. Он должен быть дочерним элементом <table> и следовать после элементов <caption> и <colgroup>, если они есть, но перед элементами <tbody>, <tfoot> и <tr>. Внутри <thead> должен быть один или несколько элементов <tr>. Элемент <tfoot> записывается после <tbody> и тоже используется в таблице только один раз.

Элементы <thead>, <tbody> и <tfoot> не меняют внешний вид таблицы по умолчанию. Тем не менее с помощью CSS вы сможете оформить эти части по своему усмотрению:

Шапка, тело и подвал таблицы

В таблице стоимости груминга для Тони каждой части задан свой цвет фона. Добавьте в tbody услугу «Расчёсывание» за 300 рублей и измените сумму в tfoot на 1 900 рублей — подвал останется внизу. Сумма не вычисляется автоматически, её нужно обновить в коде. Цены в примере условные.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Стоимость груминга для Тони</title>
  </head>
  <body>
    <table>
      <caption>Стоимость груминга для Тони</caption>
      <thead style="background-color: silver">
        <tr>
          <th style="border: 1px solid gray">Услуга</th>
          <th style="border: 1px solid gray">Стоимость, руб.</th>
        </tr>
      </thead>
      <tbody style="background-color: khaki">
        <tr>
          <td style="border: 1px solid gray">Мытьё и сушка</td>
          <td style="border: 1px solid gray">1 200</td>
        </tr>
        <tr>
          <td style="border: 1px solid gray">Стрижка когтей</td>
          <td style="border: 1px solid gray">400</td>
        </tr>
      </tbody>
      <tfoot style="background-color: coral">
        <tr>
          <td style="border: 1px solid gray">Сумма</td>
          <td style="border: 1px solid gray">1 600</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Почему в старом коде tfoot стоит перед tbody

Раньше стандарт разрешал записывать <tfoot> сразу после <thead>, перед <tbody>: браузер всё равно отображал подвал в самом низу таблицы. Такой порядок встречается в старых примерах. Современный стандарт HTML требует записывать <tfoot> после <tbody> — так порядок кода совпадает с порядком чтения.

Таблица — для данных, а не для вёрстки

Используйте таблицу для данных, которые действительно связаны по строкам и столбцам: расписание, цены, результаты. Раньше таблицами расставляли по странице меню, колонки текста и картинки. Не делайте так: программа экранного доступа объявит такую разметку таблицей, а на узком экране её ячейки не перестроятся. Расположение блоков на странице задают с помощью CSS, например Flexbox и Grid. С Flexbox мы познакомимся в уроке «Вёрстка по Flexbox. Часть 1» учебника CSS.

Элементы таблиц

HTML предоставляет десять элементов для работы с таблицами. Повторите их перед выполнением задания:

Тег	Описание
`<table>`	Определяет содержимое таблицы.
`<caption>`	Определяет название таблицы.
`<th>`	Определяет ячейку заголовка таблицы.
`<tr>`	Определяет строку таблицы.
`<td>`	Определяет ячейку данных таблицы.
`<thead>`	Содержит строки шапки таблицы.
`<tbody>`	Содержит основные строки — «тело» таблицы.
`<tfoot>`	Содержит строки «подвала» таблицы.
`<col>`	Определяет свойства одного или нескольких столбцов в пределах элемента `<colgroup>`.
`<colgroup>`	Определяет группу столбцов таблицы.

Проверьте себя

Задание

Тони хочет, чтобы гости сайта знали его распорядок. В файле index.html уже есть раздел «Мой режим дня» — замените комментарий в нём таблицей:

название таблицы — «Режим дня Тони»;
в шапке <thead> — заголовки столбцов «Время», «Будни», «Выходные» с атрибутом scope="col";
в теле <tbody> — пять строк; время в начале каждой строки — заголовок строки с атрибутом scope="row":
- 07:00 — в будни «Прогулка, 20 минут», в выходные «Сплю»;
- 08:00 — «Завтрак» и в будни, и в выходные;
- 13:00 — в будни «Жду хозяина и сплю», в выходные «Прогулка в парке, 1 час»;
- 19:00 — «Ужин» всегда;
- 21:00 — «Вечерняя прогулка» всегда;
если в будни и выходные занятие одинаковое, запишите его в одну ячейку на два столбца;
добавьте в оглавление в начале страницы пункт «Мой режим дня» со ссылкой на раздел #schedule.

Ожидаемый результат: в разделе «Мой режим дня» — таблица с названием над ней, жирными заголовками столбцов и временем в начале строк. «Завтрак», «Ужин» и «Вечерняя прогулка» занимают ширину двух столбцов. Пункт оглавления «Мой режим дня» переводит к таблице. Рамок у ячеек нет — оформлением таблицы мы займёмся в учебнике CSS.

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body style="background-color: linen">
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</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="Мой канат &quot;Удав&quot;">
          <figcaption style="color: dimgray">Я и мой канат «Удав»</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 style="color: #8B4513">Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</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" style="color: #8B4513">Мой режим дня</h2>
        <!-- Здесь будет таблица режима дня -->
      </section>
      <section>
        <h2 style="color: #8B4513">Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer style="background-color: hsl(30, 50%, 90%)">
      <p style="text-align: center"><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <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>
          <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>
          </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>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Продолжите в VS Code

Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
Откройте index.html в браузере и перейдите к таблице по пункту оглавления.
Проверьте страницу валидатором на вкладке «Validate by File Upload», как в уроке «Компьютерный код».

Ожидаемый результат: таблица в браузере выглядит так же, как в редакторе, а валидатор не находит ошибок. Если валидатор сообщает, что в строке больше ячеек, чем столбцов, проверьте строки с объединёнными ячейками. Если найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом.

Дополнительное задание: таблицы для сайта Тони

Создайте для сайта Тони пять таблиц по образцам ниже: об игрушках, прогулках, планах на день, груминге и покупках. Пишите их в редакторе под образцами друг за другом. Для рамок добавляйте каждой ячейке style="border: 1px solid gray". Если у ячейки уже есть атрибут style, допишите объявления в него через точку с запятой.

Добавьте каждой таблице название с помощью <caption>. Для заголовков используйте <th>: укажите scope="col" для заголовков столбцов и scope="row" для заголовков строк. В образцах 2 и 3 объедините ячейки с помощью rowspan и colspan. В образце 4 задайте цвета через <col>, применив span к двум последним столбцам. В образце 5 используйте <thead>, <tbody> и <tfoot>. Цвета — khaki, silver и coral, как в примерах выше. Цены и время в образцах условные; итоговую стоимость посчитайте и запишите самостоятельно.

Любимые игрушки Тони
Игрушка	Где играем	Любимая игра
Мячик	В парке	Апорт
Канат	Дома	Перетягивание

Образец 1. Заголовки строк и столбцов.

Прогулки на выходных
День	Маршрут	Время, мин
Суббота	Парк у дома	60
Воскресенье	Парк у дома	90

Образец 2. Один маршрут для двух дней: объединение строк.

Планы Тони на день
Время	Будни	Выходные
08:00	Завтрак
13:00	Отдых дома	Прогулка в парке

Образец 3. Общий завтрак в будни и выходные: объединение столбцов.

Услуги груминга для Тони
№	Услуга	Время, мин	Цена, руб.
1	Мытьё и сушка	30	1 200
2	Стрижка когтей	10	400

Образец 4. Оформление столбцов через col и span.

Покупки для прогулки
Покупка	Стоимость, руб.
Мячик	300
Походная миска	500
Поводок	900
Сумма	1 700

Образец 5. Шапка, тело и подвал с итоговой стоимостью.

Ожидаемый результат: пять таблиц с названиями, заголовками и рамками, как на образцах. В таблице прогулок ячейка с маршрутом занимает две строки, а в планах на день ячейка «Завтрак» — два столбца. В таблице услуг груминга окрашены столбцы, в таблице покупок — шапка, тело и подвал. Итоговая стоимость покупок — 1 700 рублей. После своей попытки сравните код с решением.

Повторите таблицы по образцу

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Таблицы для сайта Тони</title>
  </head>
  <body>
    <!-- Создайте здесь пять таблиц для сайта Тони по образцам из урока -->
  </body>
</html>