Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Атрибуты

abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD</title>
 </head>
 <body>

  <table border="1" cellpadding="7" cellspacing="0">
   <tr>
     <td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
   </tr>
   <tr>
     <td valign="top" align="center">Ячейка 2</td>
     <td valign="top">Ячейка 3</td>
   </tr>
  </table> 

 </body>
</html>

htmlbook.ru

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

Элемент <td> (от англ. «table data» ‒ «данные таблицы») определяет стандартную ячейку HTML таблицы. Элемент <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

В HTML таблице может быть два вида ячеек:

  • Заголовочная ячейка ‒ содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>). По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
  • Стандартная ячейка ‒ содержит табличные данные (создается при помощи элемента <td>). По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.

Содержимым элемента <td> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.

Примечание:

Все строки таблицы содержат одинаковое количество ячеек, которое равно количеству ячеек самой длинной строки. Если в строке оказывается меньше ячеек, чем в других строках, то браузер автоматически помещает пустые ячейки в конец строки, таким образом заполняя ее. Если требуется разместить пустую ячейку в начале или середине строки, нужно создать ячейку без содержимого в нужном месте.
Обратите внимание, что ячейки, которые браузер добавляет автоматически, не имеют рамки, поэтому, если такие ячейки располагаются друг за другом, то они будут отображаться в виде одной объединенной ячейки.

Синтаксис

<table>
  ...
  <tr>
    ...
    <td> ... </td>
 

    ...
  </tr>
  ...
</table>

Закрывающий тег

Не обязателен.

Атрибуты

abbrУстарел в HTML5
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
alignУстарел в HTML5
Указывает выравнивание содержимого ячейки по горизонтали:
left — выравнивание содержимого ячейки по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине (одновременно по правому и левому краю)
char — выравнивание по указанному символу
axisУстарел в HTML5
Группирует ячейки связанные между собой похожей информацией.
backgroundУстарел в HTML5
Задаёт фоновый рисунок в ячейке.
bgcolorУстарел в HTML5
Назначает цвет фона ячейки.
bordercolorУстарел в HTML5
Устанавливает цвет рамки.
charУстарел в HTML5
Выравнивает содержимое ячейки по заданному символу.
Пример: <td char=»c» align=»char»>…</td>
charoffУстарел в HTML5
Задает смещение содержимого ячейки относительно заданного символа.
colspan
Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.
headers
Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
heightУстарел в HTML5
Устанавливает высоту ячейки данных.
nowrapУстарел в HTML5
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scopeУстарел в HTML5
Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:
col — ячейка заголовка установлена для колонки
colgroup — ячейка заголовка установлена для группы колонок
row — ячейка заголовка задана для строки
rowgroup — ячейка заголовка установлена для группы строк
valignУстарел в HTML5
Назначает выравнивание содержимого ячейки по вертикали:
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии
widthУстарел в HTML5
Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <td> со следующими значениями CSS по умолчанию:

td {
    display: table-cell;
    vertical-align: inherit;
}

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 11 атрибутов.

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

Пример HTML:

Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

Спецификации

Поддержка браузерами

Элемент
<td> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<td> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

Как создать заголовок таблицы:
Заголовок таблицы

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц

Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы


wm-school.ru

| HTML | WebReference

Предназначен для создания одной ячейки таблицы. Элемент <td> (от англ. table data cell — ячейка с данными таблицы) должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Закрывающий тег

Не обязателен.

Атрибуты

abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задаёт фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TD</title>
 </head>
 <body>
  <table border="1" cellpadding="7" cellspacing="0">
   <tr>
     <td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
   </tr>
   <tr>
     <td valign="top" align="center">Ячейка 2</td>
     <td valign="top">Ячейка 3</td>
   </tr>
  </table>
 </body>
</html>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

webref.ru

Тег | HTML справочник

Поддержка браузерами

Описание

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

Содержимым тега <td> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.

Стоит обратить внимание, что все строки таблицы содержат одинаковое количество ячеек, которое равно количеству ячеек самой длинной строки. Если в строке оказывается меньше ячеек, чем в других строках, то браузер автоматически помещает пустые ячейки в конец строки, таким образом заполняя ее. В случае необходимости размещения пустой ячейки в начале или середине строки, для обозначения отсутствия данных, нужно создать ячейку без содержимого в нужном месте.

Примечание: обратите внимание, что ячейки, которые браузер добавляет автоматически, не имеют рамки, то есть в случае следования таких ячеек друг за другом, они будут отображаться в виде одной объединенной ячейки.

Атрибуты

colspan:
Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию — 1. Пример »
headers:
Указывает одну или несколько заголовочных ячеек, связанных с данной ячейкой. В качестве значения атрибута выступает идентификатор или список разделенных пробелами идентификаторов, принадлежащих нужным заголовочным ячейкам. Пример »
rowspan:
Указывает положительное целое число, определяющее сколько строк будет охватывать ячейка (по вертикали). Значение по умолчанию — 1. Пример »

Тег <td> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


td {
    display: table-cell;
    vertical-align: inherit;
}

Пример


<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

Результат данного примера в окне браузера:

puzzleweb.ru

Тег HTML ячейка таблицы

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

В HTML таблицах существует 2 типа ячеек: обычные и ячейки-заголовки. Тег <td> указывает на обычные ячейки таблицы HTML. Для определения ячейки-заголовка используйте тег <th>.

HTML тег ячейки <td> ставится внутри тега <tr> — строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<td>контент ячейки</td>

Отображение в браузере

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

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

<!DOCTYPE html>
<html>
<head>
<title>Простая таблица на 4 ячейки</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
colspan число Количество ячеек по горизонтали, которые должны быть объединены.
headers id_заголовка Указывает заголовок, к которому относится ячейка.
rowspan число Количество ячеек по вертикали, которые должны быть объединены.
Устаревшие атрибуты
abbr текст Короткая версия содержимого ячейки.
align left
right
center
justify		 Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis имя_категории Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(236,123,050), rgb(0, 20, 187).
HTML hex: #faf3e1, #ccc.
HTML colorname: white, green;
height пиксели
проценты		 Высота ячейки. В HTML5 используйте CSS.
nowrap пусто / nowrap Логический атрибут. Устанавливает запрет переноса в тексте ячейки. В HTML5 используйте CSS.
scope col
colgroup
row
rowgroup		 Устанавливает ячейку как заголовок для:
col — колонки; colgroup — группу колонок; row — ряда; rowgroup — группы рядов.
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого ячейки по вертикали. В HTML5 используйте CSS.
width пиксели
проценты		 Ширина ячейки. В HTML5 используйте CSS.

guruweba.com

В чём разница между HTML-тегами и ?

Много лет назад тег td использовался для вёрстки сайтов, что не является его прямым назначением. А с ростом популярности CSS идея «таблицы — это плохо» укоренилась в мозгах многих разработчиков. Но это совсем не так — таблицы плохи только тогда, когда их используют не по назначению. То есть не для отображения табличных данных: электронных таблиц, календарей, и т.д. Если вам необходимо вставить на страницу подобные данные, не стоит сомневаться — смело используйте HTML-таблицы.

Те, кто начал заниматься веб-разработкой уже после того, как табличная вёрстка впала «в немилость», могут не знать всех элементов, используемых в HTML-таблицах. Один из распространённых вопросов от них звучит так: «В чём разница между табличными тегами <th> и <td>?».

HTML тег td расшифровывается как table data («табличные данные»). Он создаёт ячейки в определённом ряду таблицы. Именно в этот тег необходимо вставлять текст и изображения.

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

Большинство браузеров отображают текст в такой ячейке жирным шрифтом и выравнивают его по центру. Конечно, для оформления заголовков таблицы и содержимого ячеек можно и нужно использовать CSS.

Тэг <th> (а не теги tr и td) используется для установки содержимого ячейки заголовком определённой колонки или ряда.

Заголовки таблицы обычно расположены по верхнему или левому краю таблицы — в верхнем ряду как заголовки колонки или в первой колонке слева как заголовки ряда. Ячейки-заголовки показывают, что за содержимое расположено в таблице рядом или под ними, облегчая восприятие таблицы.

Не используйте <th> для оформления ячеек. Поскольку браузеры обычно меняют внешний вид ячеек-заголовков, некоторые веб-дизайнеры пользуются этой особенностью для выделения и центровки шрифта. Так не следует делать сразу по нескольким причинам:

  1. Нельзя полагаться на то, что все браузеры будут отображать ваш контент одинаково. Будущая версия браузера может поменять цвет, используемый по умолчанию или вообще перестать выделять содержимое тега <th>. Поэтому никогда не стоит полагаться на встроенные стили браузеров и использовать данный HTML-элемент;
  2. Это семантически неправильно. Некоторые пользовательские агенты могут читать голосом содержимое таблиц и добавлять «заголовок таблицы: ваш текст» при встрече с ячейкой <th>. Кроме этого некоторые веб-приложения могут размещать заголовки по верхней кромке страницы. Это станет проблемой, если ячейка не является заголовком, а используется исключительно для оформления.

Использование неподходящих тегов может ограничить доступность вашего контента для многих пользователей. Особенно для тех, кто использует различные вспомогательные устройства.

Для оформления ячеек следует применять CSS. Разделение стиля (CSS) и структуры (HTML тег td) — общепринятый метод веб-дизайна уже много лет. Повторим ещё раз: используйте <th> потому, что содержимое ячейки — заголовок, а не потому, что вам нравится, как это по умолчанию отображает ваш браузер.

www.internet-technologies.ru

Атрибуты тега | htmlbook.ru

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

align

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

bgcolor

Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.

colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких столбцов. Например, как для таблицы, показанной на рис. 12.2.

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

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

height

Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.3.

Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек

В приведенной на рис. 12.3 таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью атрибута rowspan.

valign

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

width

Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.

htmlbook.ru

No related posts.