1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
---
title: '<td>: элемент ячейки таблицы данных'
slug: Web/HTML/Element/td
translation_of: Web/HTML/Element/td
---
<p><strong>HTML элемент <code><td></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><td></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>
|
