Попробуй
бесплатно

04:40:21

3 дня

м. Коломенская, ул. Нагатинская, д. 29, к. 4Все филиалы +7 495 151-19-01

Программирование2 декабря 2025

Как сделать таблицу в HTML вручную и онлайн

Таблицу в HTML можно встроить в любой сайт и адаптировать под любой размер экрана, стиль и формат отображения. Код таблицы HTML можно написать руками или в онлайн-редакторе

HTML-таблица — элемент веб-страницы, который позволяет упорядочивать данные в виде строк и столбцов. Код таблицы HTML можно написать руками или в онлайн-редакторе. HTML-таблицы встраиваются прямо в код сайта, поэтому их можно оформлять с помощью CSS и адаптировать под разные экраны. Они меньше «весят» и отображаются без ошибок. Как сделать таблицу в ХТМЛ онлайн или написать ее код руками рассказывает Академия ТОП.

“
«HTML tables allow web authors to arrange data into rows and columns.» Таблица в HTML — простой и универсальный инструмент для структурирования информации.

Что такое HTML-таблица: простое определение

HTML-таблица — это структура данных, собранная из строк и столбцов с помощью тегов <table>, <tr> и <td>.
Она нужна, когда данные логичнее представить в виде ячеек: расписания, сравнения, характеристики, результаты, списки участников.

Строится таблица последовательно:
таблица → строка → ячейка.

Если нарушить порядок, браузер просто не покажет таблицу или покажет исходный код типа: <table> <tr> <th>Курс</th> <th>Возраст</th> <th>Формат</th> </tr> <tr> <td>Scratch</td> <td>7–12 лет

Теги таблицы в HTML

HTML — язык разметки. Он «понимает» вас, только если вы отдадите ему определенные команды — теги. Теги в HTML структурируют страницу и отвечают за отображение контента. Чтобы ваши данные появились на странице сайта в виде таблицы, надо использовать следующие теги:

<table> — контейнер для всей таблицы
<tr> — строка таблицы
<td> — ячейка данных
<th> — ячейка заголовка таблицы
<caption> — подпись таблицы
<thead>, <tbody>, <tfoot> — части таблицы для логичной структуры

Нет времени читать статью?

Получите ответы от практикующих специалистов на бесплатном занятии в вашем городе

Пример простой HTML-таблицы

Вот таблица, которую вы видите на сайте после публикации кода:

А вот код, который написал программист, чтобы эта таблица появилась на сайте:

Обратите внимание, таблица состоит из открывающих и закрывающих тегов, а содержимое ячеек прописано внутри рамочного тега <td> </td>. Если что-то перепутать, таблица не появится — на странице отобразится код, а не столбцы и строки.

Чтобы адаптировать таблицу к дизайну, стилистике и логике сайта, достаточно добавить несколько стилей. Это делается с помощью CSS — Cascading Style Sheets — каскадных таблиц стилей — своеобразной надстройки к HTML, которая позволяет управлять внешним видом веб-ресурса тоже с помощью языковых тегов. HTML описывает число строк и их содержимое, CSS отвечает за ширину границ, высоту шрифта, фон и другие «дизайнерские решения».

Вот как выглядит наша таблица с примененным CSS форматированием:

А вот каким стал ее HTML-код:

Как сделать таблицу онлайн

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

Шаги:

Открыть любой HTML-генератор таблиц, например https://htmled.it/redaktor/ или https://www.tablesgenerator.com/html_tables
Указать количество строк и столбцов.
Заполнить ячейки текстом.

Нажать «Сгенерировать HTML».
Скопировать код в файл .html.

Используя встроенные инструменты, можно выбрать готовый шаблон таблицы или создать свою тему оформления. Редактируется все от ширины колонок и цвета шрифта до формата границы.

Если используете редактор https://htmled.it/redaktor/, можно сначала в текстовом документе создать таблицу средствами Word, а потом скопировать ее в редактор и получить готовый HTML-код. Вставлять таблицу надо в левое окошко редактора.

Как создать таблицу в HTML вручную

Таблицу можно написать. Для этого надо использовать рамочные теги и Блокнот — базовый редактор, встроенный в операционную систему любого ПК.

Как написать таблицу вручную по шагам:

Открыть Блокнот на компьютере.
Ввести базовый HTML-шаблон с тегами <html>, <head>, <body>.
Внутри <body> написать код таблицы. Необходимо посчитать количество строк и столбцов, разметить их открывающими и закрывающими тегами, а потом внести содержимое. Для этого удобнее писать в столбец, открывая новую строку для каждого значения, но можно и написать просто сплошным текстом, примерно так:

<table> <caption>Расписание занятий</caption> <tr> <th>День</th> <th>Время</th> <th>Предмет</th> </tr> <tr> <td>Понедельник</td> <td>16:00</td> <td>HTML</td> </tr> <tr> <td>Среда</td> <td>16:00</td> <td>CSS</td> </tr> <tr> <td>Пятница</td> <td>16:00</td> <td>Scratch</td> </tr> </table>

На странице сайта эта таблица будет такой:

Сохранить файл под именем table.html.
Открыть файл двойным кликом в браузере.

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

Как сделать таблицу в HTML с CSS

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

Внутренние стили: style="..." Это самый быстрый вариант. Стили прописываются прямо в теге.

Примеры:

<td style="border: 1px solid #ccc;">Анна</td>
<th style="background: #f2f2f2; padding: 10px;">Возраст</th>

Когда полезно:

для быстрых учебных примеров;
когда таблица маленькая (если таблица большая, стили повторяются десятки раз, это увеличивает вес документа);
когда нужно протестировать отдельное оформление.

Встроенный блок <style> в <head>. Идеальный вариант для учебных проектов: стили собираются наверху страницы, а HTML остается чистым. Работает только в одном HTML-файле.

Пример:

<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th {
      background: #fafafa;
      padding: 8px;
      border: 1px solid #ccc;
    }

    td {
      padding: 8px;
      border: 1px solid #ccc;
    }
  </style>
</head>

Когда полезно:

если таблица большая;
если стилей много;
если одна таблица требует разных настроек.

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

Пример структуры:

index.html

styles.css

В HTML:

<link rel="stylesheet" href="styles.css">

В styles.css:

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background: #f0f0f0;
  color: #333;
  font-weight: bold;
  padding: 10px;
}

td {
  padding: 10px;
  border: 1px solid #ddd;
}

Когда полезно:

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

Главное преимущество — таблица на странице выглядит чистой, а стили живут отдельно.

Что можно настроить в CSS

Рамки (border) — сделать границы таблицы видимыми.

td { border:1px solid #ddd; }

Фон ячеек (background) — выделить строки или заголовки.

th { background:#f2f2f2; }

tr:nth-child(even) { background:#fafafa; }

Отступы (padding) — чтобы текст не прилипал к краям.

td { padding:10px; }

Ширину (width) — сделать таблицу шире или уже.

table { width:100%; }

Выравнивание текста (text-align) — центр, слева или справа.

th { text-align:center; }

td.number { text-align:right; }

Цвет и оформление заголовков (color, font-weight) — выделить шапку таблицы.

th { color:#333; font-weight:bold; }

В Академии ТОП основы HTML изучают на всех курсах, связанных с разработкой. Выбирайте подходящее направление программирования и запишитесь на курс:

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

Хотите стать программистом?

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

В Академии ТОП обучение на 80% состоит из практики, уже на первых занятиях вы получите навыки работы с HTML, узнаете правила написания программ и попробуете свои силы в кодинге.

Онлайн-инструменты: когда они полезны

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

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

Поэтому таблицы занимают важное место в обучении веб-разработке, и ученики Академии ТОП используют их почти в каждом учебном проекте. Освоив теги <table>, <tr> и <td>, любой новичок сможет создавать аккуратные, читаемые и полезные таблицы для сайтов и учебных работ.

Частые вопросы

Какие существуют семантические теги HTML5 для группировки строк в таблице помимо <thead>, <tbody> и <tfoot> и для какой цели они используются?

Для стилизации столбцов используются теги <colgroup> и <col>. А для улучшения семантики заголовков — атрибут scope="col/row" у тега <th>.

Какие CSS-свойства, помимо перечисленных, используются для контроля расстояния между ячейками таблицы и как они взаимодействуют со свойством border-collapse?

Для этого используется свойство border-spacing. Оно работает только когда у таблицы установлено border-collapse: separate.

В чем заключаются основные принципы обеспечения доступности (accessibility) для HTML-таблиц, особенно для пользователей со слабым зрением?

Это использование атрибута scope для <th>, тега <caption> для подписи и атрибута aria-describedby для описания сложных таблиц.

Как методы современного CSS, такие как Grid Layout и Flexbox, конкурируют с традиционными HTML-таблицами в плане верстки и в каких сценариях их использование считается более предпочтительным?

Grid и Flexbox предпочтительнее для компоновки макета всей страницы, так как они более гибкие. А HTML-таблицы следует использовать только для представления табличных данных.

Чек-лист перед публикацией таблицы

☐ Продумано содержание

☐ Выбрано количество строк и столбцов

☐ Выбрана стратегия: онлайн или вручную

☐ Добавлены стили, таблица выглядит ровно

☐ Отображается корректно в браузере

☐ Проверена адаптивность на телефоне

Как сделать таблицу в HTML вручную и онлайн

Что такое HTML-таблица: простое определение

Теги таблицы в HTML

Нет времени читать статью?

Пример простой HTML-таблицы

Как сделать таблицу онлайн

Как создать таблицу в HTML вручную

Как сделать таблицу в HTML с CSS

Что можно настроить в CSS

Хотите стать программистом?

Онлайн-инструменты: когда они полезны

Частые вопросы

Чек-лист перед публикацией таблицы

Похожие статьи

Хотите лучше разобраться в вопросе?