path: root/files/ru/web/html/element/tfoot/index.html

---
title: <tfoot>
slug: Web/HTML/Element/tfoot
tags:
  - HTML
  - Tables
  - Web
translation_of: Web/HTML/Element/tfoot
---
<p id="Summary"><em>HTML </em>элемент подвала таблицы (<code>&lt;tfoot&gt;</code>) определяющий набор строк суммирующих столбцы таблицы.</p>

<h2 id="Используемый_контекст">Используемый контекст</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td>
   <td>None.</td>
  </tr>
  <tr>
   <td>Допустимое содержание</td>
   <td>Ноль или более {{ HTMLElement("tr") }} элементов.</td>
  </tr>
  <tr>
   <td>Tag omission</td>
   <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The end tag may be omitted if the {{ HTMLElement("tbody") }} element is immediately followed by an, eventually implicitly-defined, {{ HTMLElement("tbody") }}, or if there is no more content in the parent {{ HTMLElement("table") }} element.</td>
  </tr>
  <tr>
   <td>Разрешенные родительские элементы</td>
   <td> A {{ HTMLElement("table") }} element. The {{ HTMLElement("tfoot") }} must appear after any {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }} or {{ HTMLElement("thead") }} element. It can be before or after all {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} elements, but not intermixed with them.<br>
    {{ HTMLVersionInline("4") }} The {{ HTMLElement("tfoot") }} element cannot be placed after any {{ HTMLElement("tbody") }} and {{ HTMLElement("tr") }} element. This restriction has been softened in HTML5.</td>
  </tr>
  <tr>
   <td>Нормативные документы</td>
   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tfoot-element">HTML5, section 4.9.7</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3">HTML4.01, section 11.2.3</a>)</td>
  </tr>
 </tbody>
</table>

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

<p><span style="line-height: 21px;">Этот элемент включает в себя </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
 <dd>Этот атрибут определяет горизонтальное выравнивание содержимого каждой ячейки. Возможные значения:
 <ul>
  <li><span style="font-family: courier new;">left</span>, выравнивание содержимого по левому краю ячейки</li>
  <li><span style="font-family: courier new;">center</span>, выравнивание содержимого по центру ячейки</li>
  <li><span style="font-family: courier new;">right</span>, выравнивание содержимого по правому краю ячейки</li>
  <li><span style="font-family: courier new;">justify</span>, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого</li>
  <li><span style="font-family: courier new;">char</span>, выравнивание текстового содержимого по специальному символу с минимальным смещением, определенным {{ htmlattrxref("char", "tbody") }} и {{ htmlattrxref("charoff", "tbody") }} атрибутами {{ unimplemented_inline("2212") }}.</li>
 </ul>

 <p>Если этот атрибут не задан, то значением по умолчанию является <span style="font-family: courier new;">left</span>.</p>

 <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.

 <ul>
  <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li>
  <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "tfoot") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li>
 </ul>
 </div>
 </dd>
</dl>

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

 <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("tfoot") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div>
 </dd>
</dl>

<dl>
 <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
 <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tfoot") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored.
 <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "tbtfootody") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "tfoot") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div>
 </dd>
</dl>

<dl>
 <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
 <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
 <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
 </dd>
</dl>

<dl>
 <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} в {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} в {{ HTMLVersionInline("5") }}</dt>
 <dd>Этот атрибут задает вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута:
 <ul>
  <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li>
  <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li>
  <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li>
  <li>and <span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li>
 </ul>

 <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div>
 </dd>
</dl>

<h2 id="DOM_интерфейс">DOM интерфейс</h2>

<p>Этот элемент реализует интерфейс <code><a href="/en/docs/Web/API/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code>.</p>

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

<p>Пожалуйста обратитесь к странице {{ HTMLElement("table") }} для примера <code>&lt;tfoot&gt;</code>.</p>

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

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop("1.0") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>1.0</td>
   <td>{{ CompatNo() }} {{ bug("915") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>1.0</td>
   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} {{ bug("915") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{ Non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li>
 <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;">&lt;tfoot&gt;</span> element:
  <ul>
   <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
   <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li>
  </ul>
 </li>
</ul>

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