Справочник HTML | Теги на букву T

Тег <table>

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

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

<tr> — Строка (обязательно).
<td> — Ячейка (обязательно).
<th> — Заглавная ячейка.
<caption> — Заголовок всей таблицы.
<col> — Колонка таблицы (для задания CSS-стилей).
<colgroup> — Группирует колонки <col>.
<thead> — Шапка таблицы.
<tbody> — Тело таблицы.
<tfoot> — Подвал таблицы.

Атрибуты

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

Пример 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>

Результат

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Пример 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):

Табло вылета
Рейс	Аэропорт	Время
U6105	Иркутск	19:30
U6263	Екатеринбург	19:50
U6100	Новосибирск	21:30

Тег <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>

Результат

01	02	03
11	12	13
21	22	23
31	32	33
41	42	43

Тег <td>

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

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

Атрибуты

Атрибут	Функция	Значение
colspan	Объединяет ячейки по горизонтали.	Целое положительное число, не больше 1000.
headers	Связывает ячейки <td> с заглавной ячейкой <th> для речевых браузеров.	Идентично значению идентификатора заглавной ячейки <th>. Допускает несколько идентификаторов через пробел.
rowspan	Объединяет ячейки по вертикали.	Целое положительное число, не больше 65534.

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

Пример

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

Результат

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5

Тег <template>

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

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

Атрибуты

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

Пример

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

Тег <textarea>

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

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

Атрибуты

Атрибут	Функция	Значение
autocomplete	Включает или отключает в браузере автозаполнение данных, которые пользователь вводил ранее.	on — Включает автозаполнение текста. off — Отключает.
cols	Ширина поля в символах.	Целое положительное число. По умолчанию 20.
dirname	Направление текста, актуально для арабского и иврита.	Произвольная текстовая строка, а в конце к ней добавляют.dir.
disabled	Отключает элемент, делая его неактивным.	Атрибут без значения.
form	Связывает поле с формой по её идентификатору.	Идентично значению атрибута id элемента <form>.
maxlength	Максимальное количество разрешённых символов в тексте.	Целое положительное число.
minlength	Минимальное количество разрешённых символов в тексте.	Целое положительное число.
name	Уникальное имя элемента.	Уникальное имя.
placeholder	Выводит короткую подсказку внутри поля формы (серым цветом).	Текст, вроде: «Введите сообщение».
readonly	Не позволяет пользователю изменять элемент, оставляя его рабочим.	Атрибут без значения.
required	Делает поле обязательным для заполнения.	Атрибут без значения.
rows	Высота поля в строках текста.	Целое положительное число. По умолчанию 2.
wrap	Параметры переноса строк.	soft — Переносы при отправке на сервер не сохраняются (по умолчанию). hard — Переносы при отправке на сервер сохраняются (только если задан атрибут cols).

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

Пример

<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>

Результат

01	02	03
11	12	13
21	22	23
31	32	33

Тег <th>

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

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

Атрибуты

Атрибут	Функция	Значение
abbr	Краткое описание содержимого ячейки для речевых браузеров.	Сокращённая версия текста.
colspan	Объединяет ячейки по горизонтали.	Целое положительное число, не больше 1000.
headers	Связывает ячейки <td> с заглавной ячейкой <th> для речевых браузеров.	Идентично значению идентификатора заглавной ячейки <th>. Допускает несколько идентификаторов через пробел.
rowspan	Объединяет ячейки по вертикали.	Целое положительное число, не больше 65534.
scope	Связывает группы ячеек <td> с заглавной ячейкой <th> для речевых браузеров.	Заглавная ячейка установлена: col — для столбца. colgroup — для группы столбцов (если есть <colgroup> или у ячеек есть атрибут colspan). row — для строки. rowgroup — для группы строк (если у ячеек есть атрибут rowspan).

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

Пример

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

Результат

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Тег <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>

Результат

01	02	03
11	12	13
21	22	23
31	32	33

Тег <time>

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

Атрибуты

Атрибут	Функция	Значение
datetime	Дата и время на языке понятном машинам.	В формате ISO 8601 (YYYY-MM-DD).

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

Пример

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

Результат

В СССР 4 октября 1957 в 19:28:34 UTC состоялся запуск на орбиту первого в мире искусственного спутника Земли.

Тег <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>

Результат

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Тег <track>

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

Атрибуты

Атрибут	Функция	Значение
kind	Тип текстовой дорожки.	captions — Дублирование диалогов, звуков и музыки для глухих людей. chapters — Названия разделов для навигации. descriptions — Звуковое описание видео, когда изображение недоступно, и для слепых людей. metadata — Метаданные для скриптов. subtitles — Субтитры для глухих людей или перевод (по умолчанию).
src	Адрес ресурса.	URL
srclang	Язык текстовой дорожки.	Код языка. Например: ru или en.
label	Описание дорожки.	Текст.
default	Данная дорожка будет выбрана по умолчанию.	Атрибут без значения.

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

Синтаксис

<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>

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

Тег <table>

Атрибуты

Пример 1

Результат

Пример 2

Результат

Тег <tbody>

Атрибуты

Пример

Результат

Тег <td>

Атрибуты

Пример

Результат

Тег <template>

Атрибуты

Пример

Тег <textarea>

Атрибуты

Пример

Результат

Тег <tfoot>

Атрибуты

Пример

Результат

Тег <th>

Атрибуты

Пример

Результат

Тег <thead>

Атрибуты

Пример

Результат

Тег <time>

Атрибуты

Пример

Результат

Тег <title>

Атрибуты

Пример

Тег <tr>

Атрибуты

Пример

Результат

Тег <track>

Атрибуты

Синтаксис

Популярное

Полезное

Получить книгу

Мы здесь

Поделиться материалом с друзьями:

Контакты

Присоединяйтесь