Как работать с таблицами в HTML

Простое руководство для начинающих фронтенд-разработчиков и верстальщиков

26 декабря 2025

Скопировано

Содержание

Честные истории о карьере в IT

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

Что понадобится для верстки

Для создания HTML-таблиц вам понадобится любой современный браузер и редактор кода. Мы будем использовать Google Chrome и VS Code. Если у вас такая же связка — рекомендуем зайти в маркетплейс VS Code и установить расширение Live Server. Оно создаст локальный сервер и будет автоматически обновлять страницу в браузере при каждом сохранении файла. Например, вы добавите новую строку в таблицу, нажмете Ctrl+S — и сразу увидите внесенное изменение. Без этого расширения вам придется каждый раз обновлять страницу вручную.

Откройте VS Code и нажмите на иконку Расширения в левой боковой панели (четыре квадратика). Далее в строке поиска введите «Live Server» и нажмите кнопку Install. После установки в правом нижнем углу редактора должна появиться кнопка Go Live. Если кнопка не появилась — перезапустите VS Code. Источник: автор статьи

После установки редактора и расширения создайте на компьютере папку и назовите ее, например, table-layout. Откройте эту папку в VS Code и затем создайте внутри два файла: index.html — основной файл с HTML-разметкой и style.css — файл со стилями, который понадобится для оформления таблицы.

Добавьте в index.html базовую разметку страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Расписание занятий по HTML и CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Здесь будет наша таблица -->
</body>
</html>

Создаем таблицу с базовыми тегами

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

Любая HTML-таблица начинается с тега <table> — это контейнер для всего содержимого таблицы. Строки создаются тегом <tr> (table row), а ячейки с данными — <td> (table data). Отдельного тега для столбцов нет — они формируются автоматически из ячеек в каждой строке. Также можно использовать тег <th> (table header) для создания ячеек заголовка, которые по умолчанию выделяются жирным шрифтом и выравниваются по центру.

Добавьте в index.html внутрь тега <body> следующий фрагмент кода:

 <table>
    <tr>
      <th>День недели</th>
      <th>Время</th>
      <th>Тема занятия</th>
    </tr>
    <tr>
      <td>Понедельник</td>
      <td>10:00 - 12:00</td>
      <td>Введение в HTML</td>
    </tr>
    <tr>
      <td>Вторник</td>
      <td>10:00 - 12:00</td>
      <td>HTML-формы</td>
    </tr>
    <tr>
      <td>Среда</td>
      <td>10:00 - 12:00</td>
      <td>Основы CSS</td>
    </tr>
    <tr>
      <td>Четверг</td>
      <td>10:00 - 12:00</td>
      <td>CSS Flexbox</td>
    </tr>
    <tr>
      <td>Пятница</td>
      <td>10:00 - 12:00</td>
      <td>CSS Grid</td>
    </tr>
  </table>

Нажмите кнопку Go Live в правом нижнем углу редактора VS Code — браузер автоматически откроет страницу по адресу http://127.0.0.1:5500/index.html и будет обновлять ее при каждом сохранении файла. Вы увидите таблицу с данными, но пока без визуального оформления — должно получиться так:

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

Откройте файл style.css и добавьте немного стилей:

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #333;
  padding: 8px 12px;
}

th {
  background-color: #e0e0e0;
}

Мы объединили границы ячеек в единую аккуратную сетку и добавили внутренние отступы: 8 px по вертикали и 12 px по горизонтали. Саму таблицу выровняли по центру страницы, а шапку визуально выделили светло-серым фоном, чтобы четко разграничить заголовки и основное содержимое:

Добавляем заголовок и семантику

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

<table>
<caption>Расписание занятий на неделю</caption>
<!-- остальной код -->
</table>

Добавим несколько стилей, чтобы заголовок таблицы выглядел лучше:

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px;
  color: #333;
}

Проверяем результат в браузере:

Чтобы сделать код таблицы понятнее для разработчиков, поисковых систем и программ чтения с экрана (скринридеров), в верстке применяют семантические теги. Они делят таблицу на логические секции: <thead> — для шапки таблицы с заголовками столбцов, <tbody> — для основного содержимого с данными, <tfoot> — для итоговой информации (например, суммы или примечаний).

Ниже вы можете скопировать обновленную HTML-разметку с семантическими тегами. Если вы обновите файл index.html, внешний вид таблицы в браузере не изменится — зато код станет структурированным и удобным для работы:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Расписание занятий по HTML и CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <table>
    <caption>Расписание занятий на неделю</caption>
    <thead>
      <tr>
        <th>День недели</th>
        <th>Время</th>
        <th>Тема занятия</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Понедельник</td>
        <td>10:00 - 12:00</td>
        <td>Введение в HTML</td>
      </tr>
      <tr>
        <td>Вторник</td>
        <td>10:00 - 12:00</td>
        <td>HTML-формы</td>
      </tr>
      <tr>
        <td>Среда</td>
        <td>10:00 - 12:00</td>
        <td>Основы CSS</td>
      </tr>
      <tr>
        <td>Четверг</td>
        <td>10:00 - 12:00</td>
        <td>CSS Flexbox</td>
      </tr>
      <tr>
        <td>Пятница</td>
        <td>10:00 - 12:00</td>
        <td>CSS Grid</td>
      </tr>
    </tbody>
    <tfoot>
      <!-- Здесь будет итоговая информация -->
    </tfoot>
  </table>
</body>

</html>

Используем атрибуты для объединения ячеек

Не у всех таблиц одинаковое количество столбцов и ячеек в каждой строке. Поэтому иногда нужно объединить несколько ячеек в одну — например, чтобы создать общий заголовок для нескольких колонок или растянуть ячейку на несколько строк. Для этого используются атрибуты colspan и rowspan.

Атрибут colspan объединяет несколько соседних ячеек по горизонтали в одну. Например, если указать colspan=»3″, ячейка растянется и займет место трех столбцов. Атрибут rowspan работает по вертикали: если указать rowspan=»2″, ячейка объединит две строки и растянется вниз, занимая место двух ячеек.

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

Поправляем разметку для среды и четверга:

 <tr>
  <td rowspan="2">Среда</td>
  <td>10:00 - 12:00</td>
  <td>Основы CSS</td>
 </tr>
 <tr>
  <td>12:00 - 13:00</td>
  <td>CSS Flexbox</td>
 </tr>

Обратите внимание: мы удалили первую ячейку «Четверг», поскольку ячейка «Среда» теперь растянута на две строки с помощью атрибута rowspan=»2″. Если бы мы оставили все четыре ячейки в строке четверга, браузер попытался бы отобразить лишнюю ячейку — и структура таблицы нарушилась бы.

Заполняем тег <tfoot>:

<tr>
  <td colspan="3">Всего занятий за неделю: 5</td>
</tr>

Получаем обновленную таблицу с несколькими объединенными ячейками:

Похожим образом, комбинируя строки и столбцы с объединением ячеек через colspan и rowspan, вы сможете создавать таблицы под конкретные задачи.

Также к готовой таблице вы можете добавить больше стилей и оформить ее на свое усмотрение. Например, можно добавить плавные анимации появления, тени для объема, чередование цвета строк для лучшей читаемости, подсветку строки при наведении курсора и многое другое. Если хотите посмотреть пример оформления — замените весь код в файле style.css и посмотрите результат:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  padding: 40px;
  background-color: #f5f5f5;
}

/* Анимация появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Основные стили таблицы */
table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  animation: fadeIn 0.6s ease-out;
}

/* Заголовок таблицы */
caption {
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  text-align: left;
  background-color: #2c3e50;
  color: white;
  border-radius: 8px 8px 0 0;
}

/* Стили ячеек */
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Заголовки столбцов */
thead th {
  background-color: #34495e;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Ячейки с данными */
td {
  color: #333;
}

/* Чередующиеся строки */
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

tbody tr:nth-child(odd) {
  background-color: white;
}

/* Hover-эффект */
tbody tr:hover {
  background-color: #e3f2fd;
  transition: background-color 0.3s ease;
}

/* Футер таблицы */
tfoot td {
  background-color: #34495e;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 18px;
  font-size: 16px;
}

Вот наша обновленная таблица:

Коротко об адаптивности таблиц

Таблицы и адаптив — головная боль для любого верстальщика. Проблема в том, что у большинства таблиц горизонтальная структура, которая плохо масштабируется на узких экранах. Например, таблица с 10–20 колонками просто физически не поместится на смартфоне с шириной 320–400 пикселей.

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

Чтобы этого избежать, вы можете скрыть менее важные колонки на мобильных устройствах, преобразовать таблицу в вертикальный список карточек с помощью CSS, добавить горизонтальную прокрутку только для таблицы (не для всей страницы) или применить медиазапросы для изменения структуры. Какого-то универсального решения нет — выбор зависит от того, что вам нужно сверстать.

В нашем случае таблица небольшая, поэтому достаточно одного медиазапроса:

@media (max-width: 768px) {
  body {
    padding: 20px 10px;
  }

  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 10px 8px;
  }

  caption {
    font-size: 20px;
    padding: 15px;
  }
}

В результате даже при сильном сжатии текст не слипся и выглядит хорошо:

Что такое табличная верстка и где она используется

Табличная верстка — последний важный момент, который стоит знать о таблицах. В начале 90-х CSS находился в зачаточном состоянии и плохо поддерживался браузерами. Однако дизайнеры хотели создавать красивые страницы с интересными раскладками, и кто-то догадался использовать <table>.

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

Разумеется, у такого подхода была масса проблем:

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

Сегодня табличную верстку в вебе никто не использует — за исключением верстки email-рассылок. Почтовые клиенты вроде Outlook или Gmail плохо поддерживают CSS, поэтому разработчики до сих пор применяют таблицы для создания структуры писем. Например, чтобы разместить логотип слева, а кнопку справа в шапке письма, создают таблицу с двумя ячейками. Это ~~отдельный геморрой~~ специфическая сфера, с которой, надеемся, вы не столкнетесь.

Сайт на таблицах — Типичный сайт с табличной версткой. Источник

Полезное по теме

Станьте прокачанным frontend-разработчиком — освойте с нуля HTML, CSS, JavaScript, TypeScript и React, создавайте адаптивные веб-сайты и анимацию на страницах, работайте в крупных компаниях.

Frontend-разработчик PRO