--- title: <col> slug: Web/HTML/Element/col tags: - HTML - Веб - Ссылка - Элемент - таблицы - табличные данные HTML translation_of: Web/HTML/Element/col --- <p>{{HTMLRef}}<br> <strong>HTML элемент</strong> <strong><code><col></code></strong> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе {{HTMLElement("colgroup")}}.</p> <p>Этот элемент позволяет стилизировать столбцы с использованием CSS, но только несколько атрибутов будут иметь эффект на столбец (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">смотри спецификацию CSS 2.1</a>).</p> <table class="properties"> <tbody> <tr> <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">Категория контента</a></th> <td>Нет.</td> </tr> <tr> <th scope="row">Допустимый контент</th> <td>Нет, это {{Glossary("пустой элемент")}}.</td> </tr> <tr> <th scope="row">Пропуск тега</th> <td>Начальный тег обязательный, но, поскольку это элемент без контента, использование концевого тега запрещено.</td> </tr> <tr> <th scope="row">Допустимые родительские теги</th> <td>Только {{HTMLElement("colgroup")}}, хотя он может быть определён неявно, т. к. его стартовый тег не является обязательным. Тег {{HTMLElement("colgroup")}} обязан не иметь атрибута {{htmlattrxref("span", "colgroup")}}.</td> </tr> <tr> <th scope="row">Допустимые <a href="https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA">ARIA </a> роли</th> <td>Нет.</td> </tr> <tr> <th scope="row">Интерфейс DOM</th> <td>{{domxref("HTMLTableColElement")}}</td> </tr> </tbody> </table> <h2 id="Атрибуты">Атрибуты</h2> <p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B">общие атрибуты</a>.</p> <dl> <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", "col")}} и {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> </ul> <p>Если этот атрибут не установлен, его значение будет переопределено от {{htmlattrxref("align", "colgroup")}} элемента {{HTMLElement("colgroup")}}, к которому этот элемент принадлежит. Если его также нет, предполагается значение <code>left</code>.</p> <div class="note"><strong>Примечание: </strong>Не используйте этот атрибут, поскольку он устарел (не поддерживается) в последнем стандарте. <ul> <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: <ul> <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li> <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> </ul> </li> <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} 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 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-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>black</code> = "#000000"</td> <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>green</code> = "#008000"</td> </tr> <tr> <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>silver</code> = "#C0C0C0"</td> <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>lime</code> = "#00FF00"</td> </tr> <tr> <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>gray</code> = "#808080"</td> <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>olive</code> = "#808000"</td> </tr> <tr> <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>white</code> = "#FFFFFF"</td> <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>yellow</code> = "#FFFF00"</td> </tr> <tr> <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>maroon</code> = "#800000"</td> <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>navy</code> = "#000080"</td> </tr> <tr> <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>red</code> = "#FF0000"</td> <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>blue</code> = "#0000FF"</td> </tr> <tr> <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>purple</code> = "#800080"</td> <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>teal</code> = "#008080"</td> </tr> <tr> <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>fuchsia</code> = "#FF00FF"</td> <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><code>aqua</code> = "#00FFFF"</td> </tr> </tbody> </table> <div class="note"><strong>Замечание по использованию:</strong> Не используй этот атрибут, поскольку он нестандартный и реализован только в некоторых версиях Microsoft Internet Explorer: элемент {{HTMLElement("col")}} должно быть стилизован с использованием <a href="/en-US/docs/CSS">CSS</a>. Для получения подобного эффекта, используй свойство <a href="/en-US/docs/CSS">CSS</a> {{cssxref("background-color")}}, для соответствующих элементов {{HTMLElement("td")}}.</div> </dd> </dl> <dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</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", "col")}} is not set to <code>char</code>, 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", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> </dd> </dl> <dl> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</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("span")}}</dt> <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code><col></code> element spans. If not present, its default value is <code>1</code>.</dd> </dl> <dl> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: <ul> <li><code>baseline</code>, 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="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li><code>middle</code>, which will center the text in the cell;</li> <li>and <code>top</code>, 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: <ul> <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> </ul> </div> </dd> </dl> <dl> <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> </dl> <h2 id="Пример">Пример</h2> <p>Please see the {{HTMLElement("table")}} page for examples on <code><col></code>.</p> <h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> <td>{{Spec2('HTML4.01')}}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> <p>{{Compat("html.elements.col")}}</p> <h2 id="Смотри_также">Смотри также</h2> <ul> <li>Other table-related HTML elements: {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> <li>CSS properties and pseudo-classes that may be specially useful to style the <code><col></code> element: <ul> <li>the {{cssxref("width")}} property to control the width of the column;</li> <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>