Справочник HTML на T

Тег <table>

Тег <table> — это контейнер для элементов таблицы. Любая таблица состоит из <table>, куда вложены строки <tr>, а в каждую строку — ячейки <td>.

Для создания полноформатной таблицы внутри <table> можно использовать следующие элементы:

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример 1

<table>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
</table>

Результат

Пример 2

<table>
  <caption>Табло вылета</caption>
  <thead class="tabhead">
    <tr>
      <th>Рейс</th><th>Аэропорт</th><th>Время</th>
    </tr>
  </thead>
  <tbody class="tabbody">
    <tr>
      <td>U6105</td><td>Иркутск</td><td>19:30</td>
    </tr>
    <tr>
      <td>U6263</td><td>Екатеринбург</td><td>19:50</td>
    </tr>
    <tr>
      <td>U6100</td><td>Новосибирск</td><td>21:30</td>
    </tr>
  </tbody>
</table>

Результат

Для тегов <thead> и <tbody> заданы CSS-стили (background-color):

Тег <tbody>

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

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<table>
  <thead class="tabhead">
    <tr>
      <th>01</th><th>02</th><th>03</th>
    </tr>
  </thead>
  <tbody class="tabbody1">
    <tr>
      <td>11</td><td>12</td><td>13</td>
    </tr>
    <tr>
      <td>21</td><td>22</td><td>23</td>
    </tr>
    <tr>
      <td>31</td><td>32</td><td>33</td>
    </tr>
  </tbody>
  <tfoot class="tabfoot">
    <tr>
      <td>41</td><td>42</td><td>43</td>
    </tr>
  </tfoot>
</table>

Результат

Тег <td>

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

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

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

Результат

Тег <template>

Тег <template> — это шаблон. Он служит контейнером для фрагмента HTML-кода, и может быть вставлен в документ с помощью скрипта. Шаблон применяется для однотипных элементов с повторяющейся структурой и содержимым, таких как ячейки таблицы или пункты списка.

Внутри <template> могут находиться даже те элементы, которые не используются без родительского контейнера, такие как <li> или <tr>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<template>
  <li>Однотипные данные</li>
</template>

Тег <textarea>

Тег <textarea> используют для создания многострочного поля ввода текста в формах. К примеру, для комментариев, отзывов или даже статей.

Для оформления статей к полю <textarea> добавляют панель стилизации текста, как в редакторе Ворд. Это делают с помощью скрипта.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<form action="" method="get">
  <label>
    Многострочное текстовое поле:
    <textarea name="comment" cols="40" rows="2"></textarea>
  </label>
  <button type="reset">Очистить</button>
  <button type="submit">Отправить</button>
</form>

Результат

Тег <tfoot>

Тег <tfoot> — это подвал таблицы <table>, в нём обычно подводят итоги. В таблице может быть только один блок <tfoot>.

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<table>
  <thead class="tabhead">
    <tr>
      <th>01</th><th>02</th><th>03</th>
    </tr>
  </thead>
  <tbody class="tabbody1">
    <tr>
      <td>11</td><td>12</td><td>13</td>
    </tr>
    <tr>
      <td>21</td><td>22</td><td>23</td>
    </tr>
  </tbody>
  <tfoot class="tabfoot">
    <tr>
      <td>31</td><td>32</td><td>33</td>
    </tr>
  </tfoot>
</table>

Результат

Тег <th>

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

Обычно заглавные ячейки расположены в верхней строке или в левом крайнем столбце таблицы.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<table>
    <tr>
      <th>Ячейка 1</th>
      <th>Ячейка 2</th>
      <th>Ячейка 3</th>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
</table>

Результат

Тег <thead>

Тег <thead> — это шапка таблицы <table>, которая может содержать одну или нескольких строк. В таблице может быть только один блок <thead>, и он должен находиться сразу после открывающего тега <table> или после <caption>, но обязательно до <tbody> и <tfoot>.

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<table>
  <thead class="tabhead">
    <tr>
      <th>01</th><th>02</th><th>03</th>
    </tr>
  </thead>
  <tbody class="tabbody1">
    <tr>
      <td>11</td><td>12</td><td>13</td>
    </tr>
    <tr>
      <td>21</td><td>22</td><td>23</td>
    </tr>
  </tbody>
  <tfoot class="tabfoot">
    <tr>
      <td>31</td><td>32</td><td>33</td>
    </tr>
  </tfoot>
</table>

Результат

Тег <time>

Тег <time> используют для разметки даты и времени. Содержимое атрибута datetime предназначена для машин.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>В СССР <time datetime="1957-10-04T19:28:34Z">4 октября 1957 в 19:28:34 UTC</time> состоялся запуск на орбиту первого в мире искусственного спутника Земли.</p>

Результат

Тег <title>

Тег <title> — это заглавие или название документа. Его размещают в «служебном отделении» в теге <head>.

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

Поисковые системы придают большое значение тегу <title>, пользователи видят его содержание в результатах поиска. <title> — это визитная карточка страницы.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<!DOCTYPE html>
<html lang="ru">
  <head>
      <title>Заглавие — это важный элемент страницы</title>
  </head> 
  <body>
  </body>
</html>

Тег <tr>

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<table>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
</table>

Результат

Тег <track>

Тег <track> позволяет указать текстовую дорожку для медийных элементов <audio> или <video>. Дорожки содержат субтитры, субтитры с переводом, навигацию и др. Основной формат — .vtt.

Атрибуты

Для элемента доступны глобальные атрибуты.

Синтаксис

<video src="primer/clip.webm" controls>
  <track src="primer/clip.ru.vtt" srclang="ru" label="Русский" default>
  <track src="primer/clip.en.vtt" srclang="en" label="English">
</video>