JavaRush /Курсы /Модуль 1: Web Core /Структурирование таблиц

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

Модуль 1: Web Core
3 уровень , 6 лекция
Открыта

7.1 Тег <caption>

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

Тег <caption>

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

Синтаксис:

HTML
    
      <table>
        <caption>Заголовок таблицы</caption>
        <!-- Содержимое таблицы -->
      </table>
    
  

Пример:

HTML
    
      <table>
        <caption>Заголовок таблицы</caption>
        <tr>
          <th>Имя</th>
          <th>Оценка</th>
        </tr>
        <tr>
          <td>Иван</td>
          <td>90</td>
        </tr>
        <tr>
          <td>Мария</td>
          <td>85</td>
        </tr>
      </table>
    
  

7.2 Тег <thead>

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

Синтаксис:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
          </tr>
        </thead>
        <!-- Содержимое таблицы -->
      </table>
    
  

Пример:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Оценка</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Иван</td>
            <td>90</td>
          </tr>
          <tr>
            <td>Мария</td>
            <td>85</td>
          </tr>
        </tbody>
      </table>
    
  

7.3 Тег <tbody>

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

Синтаксис:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
          </tr>
        </thead>
        <tbody>
          <!-- Содержимое таблицы -->
        </tbody>
      </table>
    
  

Пример:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Оценка</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Иван</td>
            <td>90</td>
          </tr>
          <tr>
            <td>Мария</td>
            <td>85</td>
          </tr>
        </tbody>
      </table>
    
  

7.4 Тег <tfoot>

Тег <tfoot> используется для группировки строк «подвала» (низа) таблицы. Он обычно содержит итоговую или обобщенную информацию.

Синтаксис:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
          </tr>
        </thead>
        <tbody>
          <!-- Содержимое таблицы -->
        </tbody>
        <tfoot>
          <tr>
            <td>Итог 1</td>
            <td>Итог 2</td>
          </tr>
        </tfoot>
      </table>
    
  

Полный пример:

HTML
    
      <table>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Оценка</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Иван</td>
            <td>90</td>
          </tr>
          <tr>
            <td>Мария</td>
            <td>85</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Средний балл</td>
            <td>87.5</td>
          </tr>
        </tfoot>
      </table>
    
  

Запомнить это на самом деле очень просто:

Объяснение структуры таблицы

  • <table>: внешний контейнер для всей таблицы
  • <caption>: заголовок таблицы, который помогает описать ее содержимое
  • <thead>: группирует строки заголовков таблицы
  • <tbody>: группирует основное содержимое таблицы
  • <tfoot>: группирует строки подвала таблицы

Закрепляем материал

Давайте создадим таблицу со всеми изученными тегами и стилизуем её.

HTML
    
      <table>
        <caption>Результаты экзамена</caption>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Оценка</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Иван</td>
            <td>91</td>
          </tr>
          <tr>
            <td>Мария</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Нина</td>
            <td>89</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Средний балл</td >
            <td>91.33</td>
          </tr>
        </tfoot>
      </table>
    
  
CSS
    
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 18px;
        text-align: left;
      }

      caption {
        caption-side: top;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
      }

      th, td {
        padding: 12px 15px;
        border: 1px solid #ddd;
      }

      thead th {
        background-color: #f2f2f2;
      }

      tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }

      tfoot td {
        font-weight: bold;
        background-color: #f2f2f2;
      }
    
  
1
Задача
Модуль 1: Web Core, 3 уровень, 6 лекция
Недоступна
Заголовок с <caption>
Заголовок с <caption>
1
Задача
Модуль 1: Web Core, 3 уровень, 6 лекция
Недоступна
Структура таблицы
Структура таблицы
Комментарии (1)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
Ivan Dobroznai Уровень 6
15 июня 2025
On courses when Im paid money (another) mentor not saw about this information