Лекции
Начать
Начать обучение
JavaRush /Курсы /Python SELF /Таблицы в HTML

Таблицы в HTML

Python SELF
29 уровень , 2 лекция
Открыта

1. Элемент <table>

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

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

Пример создания таблицы с тегом <table>:

HTML 

<table>
  <!-- Здесь располагаются строки и ячейки таблицы -->
</table>

Тег <table> можно дополнительно стилизовать с помощью атрибута border, чтобы задать рамку таблице:

HTML 

<table border="1">
  <tr>
    <td>Пример ячейки</td>
  </tr>
</table>

Здесь атрибут border="1" добавляет рамку вокруг таблицы и её ячеек, делая их видимыми.

2. Элемент <tr>

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

Пример:

HTML 

<table border="1">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

В этом примере таблица состоит из двух строк. Каждая строка содержит две ячейки.

3. Элемент <td>

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

Пример использования <td>:

HTML 

<table border="1">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>
HTML 

<table border="1">
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>
Telegram

Ячейки <td> создают основное содержимое таблицы и располагаются внутри строк <tr>.

4. Элемент <th>

Тег <th> (table header) используется для создания заголовков таблицы. Ячейки, созданные с помощью <th>, по умолчанию выделяются жирным шрифтом и выравниваются по центру. Это полезно для обозначения заголовков столбцов или строк.

Пример таблицы с заголовками:

HTML 
    
<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>30</td>
  </tr>
<table border="1">
HTML 
    
<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>30</td>
</tr>
<table border="1">

В этом примере <th> используется для обозначения заголовков «Имя» и «Возраст», что позволяет пользователям быстро понять, что означают данные в каждом столбце.

5. Структурирование таблиц

При создании сложных таблиц, содержащих заголовки, данные и нижние колонтитулы, HTML позволяет использовать элементы <thead>, <tbody> и <tfoot>. Эти теги помогают разделить таблицу на три логические секции:

  • <thead> (table head) — верхняя часть таблицы, в которой обычно располагаются заголовки столбцов.
  • <tbody> (table body) — основное содержимое таблицы.
  • <tfoot> (table footer) — нижняя часть таблицы, куда можно добавить итоговые значения или примечания.

Пример таблицы, структурированной с помощью этих тегов:

HTML 

<table border="1">
  <thead>
    <tr>
      <th>Продукт</th> <th>Цена</th> <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Яблоки</td> <td>50 руб.</td> <td>10</td>
    </tr>
    <tr>
      <td>Бананы</td> <td>30 руб.</td> <td>20</td>
    </tr>
    <tr>
      <td>Виноград</td> <td>70 руб.</td> <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Итого</td> <td>35</td>
    </tr>
  </tfoot>
</table>
HTML 

<table border="1">
<thead>
<tr>
  <th>Продукт</th> <th>Цена</th> <th>Количество</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Яблоки</td> <td>50 руб.</td> <td>10</td>
</tr>
<tr>
  <td>Бананы</td> <td>30 руб.</td> <td>20</td>
</tr>
<tr>
  <td>Виноград</td> <td>70 руб.</td> <td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td colspan="2">Итого</td> <td>35</td>
</tr>
</tfoot>
</table>

В этом примере:

  • <thead> содержит заголовок таблицы с ячейками <th>, которые обозначают столбцы.
  • <tbody> включает строки с данными о продуктах.
  • <tfoot> добавляет строку для итогового значения.

Преимущества использования <thead>, <tbody>, <tfoot>:

Эти элементы помогают:

  1. Логически разделить таблицу — делая структуру таблицы более понятной и читаемой.
  2. Упрощить стилизацию и управление данными с помощью CSS и JavaScript.
  3. Улучшить доступность: некоторые браузеры и программы для чтения экранного текста могут использовать эти теги, чтобы лучше понять структуру таблицы.

6. Объединение ячеек таблицы

HTML позволяет объединять ячейки таблицы по горизонтали и вертикали с помощью атрибутов colspan и rowspan.

Объединение по горизонтали с помощью colspan

Атрибут colspan объединяет ячейки по горизонтали, указывая, на сколько столбцов ячейка должна растянуться.

HTML 
<table border="1">
  <tr>
    <th colspan="3">Заголовок на всю ширину таблицы</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
</table>
HTML 

<table border="1">
  <tr>
    <th colspan="3">Заголовок на всю ширину таблицы</th>
  </tr>
  <tr>
    <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td>
  </tr>
</table>

В этом примере ячейка заголовка объединяет три столбца, создавая единый заголовок для всей таблицы.

Объединение по вертикали с помощью rowspan

Атрибут rowspan объединяет ячейки по вертикали, указывая, на сколько строк ячейка должна растянуться.

HTML 
    
  <table border="1">
    <tr>
      <th rowspan="2">Категория</th>
      <th>Продукт</th>
      <th>Цена</th>
    </tr>
    <tr>
      <td>Яблоки</td>
      <td>50 руб.</td>
    </tr>
  </table>
HTML 
  
<table border="1">
  <tr>
    <th rowspan="2">Категория</th> <th>Продукт</th> <th>Цена</th>
  </tr>
  <tr>
      <-! - нет --> <td>Яблоки</td> <td>50 руб.</td>
  </tr>
</table>

Здесь ячейка с текстом «Категория» объединяет две строки по вертикали.

7. Полный пример

Рассмотрим таблицу с заголовком, телом и нижним колонтитулом, а также объединением ячеек по вертикали и горизонтали.

HTML 
    
<table border="1">
  <thead>
    <tr>
      <th>Категория</th>
      <th>Продукт</th>
      <th>Цена</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Фрукты</td>
      <td>Яблоки</td>
      <td>50 руб.</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Бананы</td>
      <td>30 руб.</td>
      <td>20</td>
    </tr>
    <tr>
      <td colspan="3">Итог по фруктам</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Конец таблицы</td>
    </tr>
  </tfoot>
</table>
HTML 

  <table border="1">
    <thead>
      <tr>
        <th>Категория</th>
        <th>Продукт</th>
        <th>Цена</th>
        <th>Количество</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Фрукты</td>
        <td>Яблоки</td>
        <td>50 руб.</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Бананы</td>
        <td>30 руб.</td>
        <td>20</td>
      </tr>
      <tr>
        <td colspan="3">Итог по фруктам</td>
        <td>30</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">Конец таблицы</td>
      </tr>
    </tfoot>
  </table>

В этом примере:

  • Ячейка «Фрукты» объединена на две строки с помощью rowspan="2".
  • Строка «Итог по фруктам» объединяет три столбца по горизонтали с помощью colspan="3".
  • <thead> и <tfoot> создают структурированные заголовок и подвал таблицы, помогая легко ориентироваться в таблице.

Элементы <thead>, <tbody> и <tfoot> и атрибуты colspan и rowspan помогают создавать удобные и структурированные таблицы. Такие таблицы не только выглядят аккуратно, но и обладают улучшенной функциональностью, что делает их удобными для чтения и взаимодействия.

Комментарии (4)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Анатолий Уровень 49
14 февраля 2026
"Упрощить стилизацию"... это не выглядит, как опечатка )))
UnknownReboot Уровень 30
1 октября 2025
Это уже не так прекрасно!
UnknownReboot Уровень 30
3 октября 2025
В первой задаче в код вставил <thead> дни недели и <tbody> уроки. Валидатор ругался без объяснения причины, просто говорил что условия задачи не выполнены.
Александр Уровень 21
15 ноября 2025
Потому что по условию <thead> и <tbody> не нужны