---
title: '<td>: элемент ячейки таблицы данных'
slug: Web/HTML/Element/td
translation_of: Web/HTML/Element/td
---
<p><strong>HTML-элемент <code>&lt;td&gt;</code></strong> определяет ячейку таблицы которая содержит данные. Участвует в <em>табличной модели</em>.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категория контента</a></th>
   <td>None.</td>
  </tr>
  <tr>
   <th scope="row">Допустимое содержимое</th>
   <td>Содержимое поток.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тега</th>
   <td>Начальный тег обязательный.<br>
    Закрывающий тег может быть пропущен, если сразу за ним следует элемент {{HTMLElement("th")}} или {{HTMLElement("td")}}, или если больше нет данных в его родительском элементе.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Элемент {{HTMLElement("tr")}}.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые ARIA роли</th>
   <td>Любые</td>
  </tr>
  <tr>
   <th scope="row">DOM интерфейс</th>
   <td>{{domxref("HTMLTableDataCellElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент содержит <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt>
 <dd>Этот аргумент содержит краткое описание содержимого в ячейке. Некоторые устройства для чтения могут подставлять это описание перед самим содержимым ячейки.
 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Вместо этого рассмотрите возможность использования атрибута <strong>title</strong>.</div>
 </dd>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Это перечисляемый атрибут указывает каким будет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
 <ul>
  <li><code>left</code>, выравнивание содержимого слева ячейки</li>
  <li><code>center</code>, центрирование контента в ячейке</li>
  <li><code>right</code>, выравнивание контента справа ячейки</li>
  <li><code>justify</code>, вставляет пробелы в текстовое содержимое ячейки, чтобы содержимое заняло ячейку</li>
  <li><code>char</code>, выравнивает текстовое содержимое по заданному символу с минимальным смещением, определяется атрибутами {{htmlattrxref("char", "td")}} и {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
 </ul>

 <p>Если этот атрибут не задан, значение по умолчанию <code>left</code>.</p>

 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.

 <ul>
  <li>Чтобы добиться такого же эффекта как при <code>left</code>, <code>center</code>, <code>right</code> или <code>justify</code> значениях, используйте их как параметры CSS-свойства {{cssxref("text-align")}}.</li>
  <li>Чтобы добиться эффекта как <code>char</code> значение в CSS3,  вы можете использовать значение {{htmlattrxref("char", "td")}} как значение свойства {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
 </ul>
 </div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
 <dd>Этот атрибут включает список строк разделённых пробелами. Каждая строка это ID группы ячеек которой соответствует этот заголовок.
 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут {{htmlattrxref("scope", "td")}}.</div>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
 <dd>Этот атрибут определяет цвет фона ячейки. Значением задаётся 6-значными шестнадцатеричными кодами как определено в <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, с префиксом '#'. Можно также использовать предопределённые цветовые строки, например:
 <table style="width: 80%;">
  <tbody>
   <tr>
    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>black</code> = "#000000"</td>
    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>green</code> = "#008000"</td>
   </tr>
   <tr>
    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>silver</code> = "#C0C0C0"</td>
    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>lime</code> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>gray</code> = "#808080"</td>
    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>olive</code> = "#808000"</td>
   </tr>
   <tr>
    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>white</code> = "#FFFFFF"</td>
    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>yellow</code> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>maroon</code> = "#800000"</td>
    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>navy</code> = "#000080"</td>
   </tr>
   <tr>
    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>red</code> = "#FF0000"</td>
    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>blue</code> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>purple</code> = "#800080"</td>
    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>teal</code> = "#008080"</td>
   </tr>
   <tr>
    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>fuchsia</code> = "#FF00FF"</td>
    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
    <td><code>aqua</code> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>Примечание использования:</strong> Не используйте этот атрибут, поскольку он нестандартный: элемент {{HTMLElement("td")}} должен быть стилизован с помощью <a href="/en-US/docs/CSS">CSS</a>. Чтобы получить аналогичный эффект как атрибут <strong>bgcolor</strong>, используйте <a href="/en-US/docs/Web/CSS">CSS</a> свойство {{cssxref("background-color")}}.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значения. Если {{htmlattrxref("align", "td")}} не задан. то атрибут <code>char</code> игнорируется.
 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, тк он устарел (и больше не поддерживается) в последней версии стандарта. Достигнуть такого же эффекта как от {{htmlattrxref("char", "thead")}}, в CSS3 вы можете you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
 </dd>
 <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного <strong>char</strong> атрибута.
 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта.</div>
 </dd>
 <dt>{{htmlattrdef("colspan")}}</dt>
 <dd>Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно <code>1</code>. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).</dd>
 <dt>{{htmlattrdef("headers")}}</dt>
 <dd>Этот атрибут содержит список срок разделённых пробелами, каждая соответствует <strong>id</strong> атрибуту {{HTMLElement("th")}} элементов которые использует этот элемент.</dd>
 <dt>{{htmlattrdef("rowspan")}}</dt>
 <dd>Этот атрибут содержит положительное целое число указывающее какое количество строк  необходимо объединить. По умолчанию значение равно<code>1</code>; Если его значение <code>0</code>, тогда его действие распространяется до конца табличной секции ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.</dd>
 <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt>
 <dd> </dd>
 <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Этот атрибут определяет вертикальное выравнивание текста в ячейке. Возможные значения атрибута:
 <ul>
  <li><code>baseline</code>, поместит текст ближе к нижней части ячейки, но выровняет его по <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">базовой линии</a> символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как <code>bottom</code>.</li>
  <li><code>bottom</code>, поместит текст как можно ближе к нижней части ячейки</li>
  <li><code>middle</code>, выравнивает текст по центру ячейки</li>
  <li>и <code>top</code>, который будет выравнивать текст как можно ближе к верхней части ячейки.</li>
 </ul>

 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("vertical-align")}}.</div>
 </dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> и <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a>  могут добавить дополнительное пространство и ширина элемента {{HTMLElement("col")}} может иметь некоторый эффект.  Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении.
 <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS-свойство {{cssxref("width")}}.</div>
 </dd>
</dl>

<h2 id="Примеры">Примеры</h2>

<p>Смотрите страницу {{HTMLElement("table")}} с примерами <code>&lt;td&gt;</code>.</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>



<p>{{Compat("html.elements.td")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Другие табличные HTML-элементы: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
</ul>

<p>{{HTMLRef}}</p>