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

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

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

• <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-документах.

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

• Как добавить изображение на страницу
• Как сделать кнопку
• Как сделать картинку ссылкой

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