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

  • 16 мая 2023

HTML

Саша Ермайкина

<table> — один из основных элементов HTML, который используют для отображения данных (текста, изображения или другого элемента) в ячейках на странице. Таблица состоит из строк и столбцов.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Основные теги, используемые при создании таблицы:

  • <table> — определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
  • <thead> — определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
  • <tbody> — определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tfoot> — определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tr> — определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
  • <th> — определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
  • <td> — определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
  • <caption> — определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.

Пошаговая инструкция

Откройте текстовый редактор, например, Visual Studio Code. Если вы ещё не работали с VS Сode, то сначала прочитайте статью.

Первый шаг

Начнём с открывающего тега <table> для создания таблицы.

<table>
  <!-- здесь будут ячейки таблицы -->
</table>

Второй шаг

Теперь добавим <thead> для создания заголовка таблицы.

<table>
  <thead>
    <!-- здесь будут ячейки таблицы -->
  </thead>
</table>

Третий шаг

Внутри <thead> используем <tr> для определения строк заголовка и <th> для определения заголовка столбца.

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
</table>

Четвёртый шаг

После <thead> добавим <tbody> для создания тела таблицы — в него мы добавляем ячейки с информацией.

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Пятый шаг

Внутри <tbody> используем тег <tr> для определения строк данных.

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>

Шестой шаг

Каждая ячейка данных должна быть обернута в тег <td>.

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1,1</td>
      <td>Ячейка 1,2</td>
    </tr>
    <tr>
      <td>Ячейка 2,1</td>
      <td>Ячейка 2,2</td>
    </tr>
  </tbody>
</table>
Пример таблицы без границ из двух строк и столбцов
Пример таблицы без границ из двух строк и столбцов

Седьмой шаг

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

<table border="1">
  <thead>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Ячейка 1,1</td>
    <td>Ячейка 1,2</td>
  </tr>
  <tr>
    <td>Ячейка 2,1</td>
    <td>Ячейка 2,2</td>
  </tr>
</tbody>
</table>
Таблица с границами
Таблица с границами

Сохраните файл с расширением .html и откройте его в веб-браузере, чтобы увидеть созданную таблицу.

Или можете воспользоваться нашим генератором.

Генератор таблицы

HTML код таблицы

Скопируйте его и используйте в своих HTML-документах.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

HTML-коды популярных эмодзи

Эмодзи давно вышли за пределы мессенджеров и социальных сетей, став важной частью веб-дизайна и пользовательского интерфейса. Они помогают сделать ваш сайт живым, ярким и эмоциональным. Но как добавить эмодзи в HTML-код без потери качества? В этой статье мы собрали для вас список из 50 самых популярных эмодзи с их названиями, значениями и HTML-кодами для вставки.

Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты. Узнайте, как просто интегрировать эмоции в свой сайт с помощью одной строки HTML!

ЭмодзиНазваниеHTML-код
😀Улыбающееся лицо&#128512;
😂Лицо со слезами радости&#128514;
😍Лицо с глазами в форме сердца&#128525;
😎Лицо в солнцезащитных очках&#128526;
😭Плачущий&#128557;
😊Смущённая улыбка&#128522;
😢Грустное лицо&#128546;
😅Лицо с каплей пота&#128517;
🤔Задумчивое лицо&#129300;
👍Большой палец вверх&#128077;
👎Большой палец вниз&#128078;
👏Аплодисменты&#128079;
🙏Сложенные руки&#128591;
❤Красное сердце&#10084;
💔Разбитое сердце&#128148;
🔥Огонь&#128293;
💯Сто баллов&#128175;
🎉Конфетти&#127881;
🎂Торт&#127874;
🌟Звезда&#127775;
✨Сияние&#10024;
🌈Радуга&#127752;
☀Солнце&#9728;
☁Облако&#9729;
🌧Дождь&#127783;
❄Снег&#10052;
🌍Земной шар&#127757;
💡Лампочка&#128161;
💤Сон&#128164;
🎵Нота&#127925;
🎶Музыка&#127926;
📱Телефон&#128241;
💻Ноутбук&#128187;
🚗Машина&#128663;
🚀Ракета&#128640;
✈Самолёт&#9992;
🚲Велосипед&#128690;
🐶Собака&#128054;
🐱Кошка&#128049;
🐭Мышь&#128045;
🦊Лиса&#129418;
🐻Медведь&#128059;
🍎Яблоко&#127822;
🍕Пицца&#127829;
🍔Бургер&#127828;
🍩Пончик&#127849;
🍉Арбуз&#127817;
HTML
  • 15 ноября 2024
Что писать в атрибуте alt

Что писать в атрибуте alt

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Читать дальше
HTML
  • 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

Читать дальше
HTML
  • 22 ноября 2023
Знакомство с HTML

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Читать дальше
HTML
  • 1 ноября 2023
Специальные символы в HTML

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

Читать дальше
HTML
  • 23 октября 2023
Зачем нужен метатег viewport

Зачем нужен метатег viewport

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

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023
Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

Читать дальше
HTML
  • 8 июня 2023