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

Содержание

HTML-теги colgroup и col.

Сегодня подведем итоги того, о чем мы поговорили в разделе, посвященном таблицам.

Но для начала коротко вспомним, о чем говорили в прошлом видео. А говорили мы о разделении таблицы на части, с помощью HTML-тегов <thead>, <tbody> и <tfoot>. Кроме этого, в прошлом видео уроке мы познакомились с еще одним тегом — <th>, который создает, так называемые, заголовочные ячейки в таблице. Ранее мы знакомились с HTML-тегом <td>, который создает ячейки в таблице. Тег <th> предназначен для выполнения таких же задач и обладает такими же параметрами. Отличие его только в том, что он выделяет текст внутри ячеек жирным начертанием.

В этом видео уроке мы познакомимся с двумя последними тегами из раздела таблиц, это <colgroup> и <col>. Сразу хочу оговориться, что данные элементы не особо популярны и могут использоваться довольно редко. Однако в спецификации они существуют, и не являются устаревшими. А значит, мы должны знать, для чего они нужны. Оба тега довольно похожи друг на друга в использовании и выполняют одну и ту же задачу. Отличие только в том, что тег

<colgroup> является парным тегом (что это значит?), а <col> является одиночным тегом, и соответственно они прописываются в документе по-разному.

HTML-теги colgroup и col.

Теперь немного поговорим об их предназначении. Данные HTML-теги могут быть использованы для указания ширины и других характеристик одной или нескольких колонок таблицы. То есть, если мы хотим сделать ширину двух колонок одинаковой, мы будем использовать один из этих тегов. При этом если колонок больше двух, остальные колонки не будут затронуты.

Теги <colgroup> и <col> имеют довольно стандартный набор HTML-атрибутов, которые мы можем применить. Здесь стоит отметить, что существую два основных атрибута, которые мы можем использовать. Атрибут span, с помощью которого мы можем указать количество колонок, для которых будут указаны последующие параметры. Кроме атрибута span, мы можем использовать атрибут ширины (width), в котором необходимо указать количество пикселей. Также здесь стоит отметить, что универсальные атрибуты для этих тегов применять нельзя.

Самое главное, что следует учесть при использовании данных элементов — они должны быть указаны в документе до тегов <tr> и <td>. Это следует всегда помнить и учитывать. В противном случае HTML-документ просто не пройдет валидацию, о которой, кстати, мы уже скоро тоже будем говорить.

Ну и по уже сложившейся традиции, представлю небольшой пример использования тега <colgroup>:

Заголовок таблицы
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3
Ячейка 3-1 Ячейка 3-2 Ячейка 3-3

В этом примере мы указали, что две колонки (span) будут равны ширине (width) 333 пикселя, а остальные останутся не тронутыми и будут использовать параметр ширины по умолчанию.

Видео урок: HTML-теги colgroup и col.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео уроке мы познакомимся со скриптами в HTML.

HTML тег

onafterprint Скрипт виконується тільки після як документ надрукований.
onbeforeprint Скрипт виконується перед тим, як документ надрукований.
onbeforeunload Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload Викликається після того як завантаження елемента завершене.
onmessage Скрипт виконується коли викликане повідомлення.
onoffline Спрацьовує коли браузер починає працювати в автономному режимі
ononline Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow Скрипт виконується коли користувач заходить на сторінку.
onpopstate Скрипт виконується коли змінено історію одного вікна.
onresize Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage Скрипт виконується, коли вміст Web Storage оновлюється.
onunload Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur Скрипт виконується, коли елемент втрачає фокус.
onchange Викликається в той момент, коли значення елемента змінюється.
oncontextmenu Скрипт виконується коли викликається контекстне меню.
onfocus Викликається в той момент, коли елемент отримує фокус.
oninput Скрипт викликається коли користувач вводить дані поле.
oninvalid Скрипт виконується, коли елемент недійсний.
onreset Викликається, коли натискається у формі кнопка типу Reset.
onsearch Викликається, коли користувач щось пише в поле пошуку (для &lt;input type=&quot;search&quot;&gt;)
onselect Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit Викликається при відправленні форми.
onkeydown Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress Викликається коли корисрувач натиснув на клавішу.
onkeyup Викликається коли користувач відпускає клавішу.
onclick Подія викликається коли користувач клацає ЛКМ по елементу.
ondblclick Виникає при подвійному клацанні ЛКМ на елементі.
ondrag Періодично викликається при операції перетягування.
ondragend Викликається коли користувач відпускає перелягуваний елемент.
ondragenter Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove Викликається, коли курсор миші переміщається над елементом.
onmouseout Викликається, коли курсор виходить за межі елемента.
onmouseover
Виконується, коли курсор наводиться на елемент.
onmouseup Викликається, коли користувач відпускає кнопку миші.
onscroll Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel Викликається, коли користувач прокручує коліщатко миші.
oncopy Викликається, коли користувач копіює вміст елемента.
oncut Викликається, коли користувач вирізає вміст елемента.
onpaste Викликається, коли користувач вставляє вміст в елемент.
onabort Виконується при перериванні якоїсь події.
oncanplay Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange Скрипт виконується коли змінюється кий в &lt;track&gt; елемента
ondurationchange Викликається коли змінюється довжина медіа файлу.
onemptied Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended Викликається коли медіа елемент повністю відтворив свій зміст.
onshow Викликається, коли елемент &lt;menu&gt; буде відображено як контекстне меню.
onloadedmetadata Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata Викликається коли медіа данні завантажено.
onloadstart Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause Викликається коли відтворення медіа даних призупинено.
onplay Скрипт викликається коли медіа дані готові почати відтворення.
onplaying Викликається коли розпочато відтворення медіа даних.
onprogress Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange Викликається коли змінюється швидкість відтворення медіа даних.
onseeked Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate Викликається коли змінилася позиція відтворення елемента &lt;audio&gt; або &lt;video&gt;.
onvolumechange Викликається коли змінюється гучність звуку.
onwaiting Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle Викликається, коли користувач відкриває або закриває елемент &lt;details&gt;.
onerror Викликається якщо при завантаженні елемента сталася помилка.

- Веб-технологии для разработчиков

colChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
align Chrome ? Edge Полная поддержка 12Firefox Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 915.
IE Полная поддержка ДаOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 915.
Opera Android ? Safari iOS ? Samsung Internet Android ?
bgcolor Chrome ? Edge ? Firefox Нет поддержки НетIE Полная поддержка ДаOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки НетOpera Android ? Safari iOS ? Samsung Internet Android ?
char Chrome ? Edge Полная поддержка 12Firefox Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 2212.
IE Полная поддержка ДаOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 2212.
Opera Android ? Safari iOS ? Samsung Internet Android ?
charoff Chrome ? Edge Полная поддержка 12Firefox Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 2212.
IE Полная поддержка ДаOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 2212.
Opera Android ? Safari iOS ? Samsung Internet Android ?
spanChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
valign Chrome ? Edge Полная поддержка 12Firefox Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 915.
IE Полная поддержка ДаOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки Нет
Нет поддержки Нет
Замечания See bug 915.
Opera Android ? Safari iOS ? Samsung Internet Android ?
width Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

HTML ǩ

ʵ

colgroup ԪΪей涨˲ͬĶ뷽ʽʽעһ colgroup ԪغУ


<table border="1">
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

һ

֧

IE Firefox Chrome Safari Opera

֧ <colgroup> ǩ

FirefoxChrome Լ Safari ֧ colgroup Ԫص span width ԡ

÷

<colgroup> ǩڶԱенϣԱиʽ

ȫӦʽ<colgroup> ǩãͲҪԸԪ͸ظӦʽˡ

<colgroup> ǩֻ table Ԫʹá

ʾעͣ

ʾΪ <colgroup> ǩ class ԡͿʹ CSS 뷽ʽȺɫȵȡ

עͣcol ԪǽԵĿԪء贴Уͱ tr Ԫڲ涨 td Ԫء

μ<col> ǩ

ѡ

ֵ
align
  • right
  • left
  • center
  • justify
  • char
ݵˮƽ뷽ʽ
char character 涨ĸַеݡ
charoff number 涨һַƫ
span number 涨Ӧú
valign
  • top
  • middle
  • bottom
  • baseline
ݵĴֱ뷽ʽ
width 涨ϵĿȡ


Установить цвет фона в три колонны с помощью тегов <colgroup> и <col>:

Пример

<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Название</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>Мой первый HTML</td>
    <td>$53</td>
  </tr>
</table>

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

Определение и использование

Tег <colgroup> указывает группу из одного или нескольких столбцов в таблице для форматирования.

Tег <colgroup> полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки, для каждой строки.

Примечание: Tег <colgroup> должен быть дочерним элементом <table>, после элементов <caption> и перед элементами <thead>, <tbody>, <tfoot>, и <tr>.

Совет: Определение различных свойств столбца внутри столбца <colgroup>, используйте тег <col> в теге <colgroup>.


Поддержка браузеров

Элемент
<colgroup> Да Да Да Да Да

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

Большинство атрибутов в HTML 4.01 не поддерживаются в HTML5.


Атрибуты

Атрибут Значение Описание
align left
right
center
justify
char
Не поддерживается в HTML5.
Выравнивает содержимое в группе столбцов
char character Не поддерживается в HTML5.
Выравнивает содержимое в группе столбцов по символу
charoff number Не поддерживается в HTML5.
Задает число знаков, содержимое будет выровнено по символу, заданный атрибутом char
span number Задает количество столбцов, которые должны охватывать группа столбцов
valign top
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в группе столбцов
width pixels
%
relative_length
Не поддерживается в HTML5.
Задает ширину группы столбцов

Глобальные атрибуты

Tег <colgroup> также поддерживает Глобальные атрибуты в HTML.


Атрибуты событий

Tег <colgroup> также поддерживает Атрибуты событий в HTML.


Связанные страницы

HTML DOM reference: Объект columnGroup


Настройки CSS по умолчанию

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


HTML тег группы colgroup


Пример

Установите цвет фона для трех столбцов с помощью тегов и :

<таблица>





ISBN
Title
цена


3476896
Мой первый HTML
$ 53

Попробуй сам "

Ниже приведены примеры "Попробуйте сами".


Определение и использование

Тег указывает группу из одного или нескольких столбцов в таблице для форматирования.

Тег полезен для применения стилей ко всем столбцам, а не для повторения стилей для каждой ячейки для каждой строки.

Примечание: Тег должен быть дочерним элементом элемента

, после любых элементов , , и элементы.

Совет: Чтобы определить различные свойства для столбца в

, используйте тег внутри тега .


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

и перед любыми
Элемент
да да да да да

атрибутов

.
Атрибут Значение Описание
пролет номер Указывает количество столбцов, которое группа столбцов должна охватывать

глобальных атрибутов

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


Атрибуты события

Тег также поддерживает атрибуты событий в HTML.



Дополнительные примеры

Пример

Выровнять текст в столбцах таблицы (с помощью CSS):

<таблица>

ISBN
Title
цена


3476896
Мой первый HTML
$ 53


2489604
Мой первый CSS
$ 47

Попробуй сам "

Пример

Выровнять текст по вертикали в столбцах таблицы (с помощью CSS):

<таблица>

месяц
Экономия


январь
$ 100

Попробуй сам "

Пример

Укажите ширину столбца таблицы (с CSS):

<таблица>

Месяц
Сбережения


января
$ 100


февраль
80 долларов

Попробуй сам "

Связанные страницы

HTML DOM ссылка: объект ColumnGroup


Настройки CSS по умолчанию

В большинстве браузеров отображается элемент со следующими значениями по умолчанию:

,

- Веб-технология для разработчиков

HTML элемент определяет группу столбцов в таблице.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

атрибутов

Атрибуты этого элемента включают глобальные атрибуты.

пролет
Этот атрибут содержит положительное целое число, указывающее количество последовательных столбцов, охватывающих элементов. Если нет, его значение по умолчанию составляет 1 . Примечание: Этот атрибут применяется к атрибутам группы столбцов, он не влияет на связанные с ним правила стилей CSS или, более того, на ячейки членов столбца группы.
  • Атрибут span не допускается, если в есть один или несколько элементов .

Устаревшие атрибуты

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и только для исторического интереса.

выравнивать
Этот перечисляемый атрибут указывает, как будет обрабатываться горизонтальное выравнивание содержимого каждой ячейки столбца. Возможные значения:
  • слева , выравнивая содержимое слева от ячейки
  • центр , центрирование содержимого в ячейке
  • справа , выравнивая содержимое справа от ячейки
  • оправдывают , вставляя пробелы в текстовое содержимое, чтобы содержимое выровнялось в ячейке
  • char , выравнивание текстового содержимого по специальному символу с минимальным смещением, определяемым атрибутами char и charoff .

Если этот атрибут не установлен, предполагается, что значение осталось . Потомки элементов могут переопределить это значение, используя собственный выравнивающий атрибут .

Примечание:
  • Не пытайтесь установить свойство text-align для селектора, дающего элемент . Поскольку элементов не являются потомками элемента, они не наследуют его.
  • Если таблица не использует атрибут colspan , используйте один селектор CSS td: nth-child (an + b) для каждого столбца, где a - общее количество столбцов в таблице, а b - порядковый номер. положение этого столбца в таблице. Только после этого селектора можно использовать свойство text-align .
  • Если в таблице используется атрибут colspan , эффект может быть достигнут путем объединения соответствующих селекторов атрибутов CSS, таких как [colspan = n] , хотя это не тривиально.
bgcolor

Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать один из предопределенных цветов.

Для достижения аналогичного эффекта используйте свойство CSS background-color .

символ
Этот атрибут определяет выравнивание содержимого в группе столбцов для символа.Типичные значения для этого включают точку (.) При попытке выровнять числа или денежные значения. Если для align не установлено значение char , этот атрибут игнорируется, хотя он все равно будет использоваться в качестве значения по умолчанию для align , которые являются членами этой группы столбцов.
charoff
Этот атрибут используется для указания количества символов для смещения данных столбца от символа выравнивания, указанного атрибутом char .
valign
Этот атрибут определяет вертикальное выравнивание текста в каждой ячейке столбца. Возможные значения для этого атрибута:
  • baseline , который поместит текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не по их нижней части. Если символы имеют все размеры, это имеет тот же эффект, что и внизу .
  • bottom , который поместит текст как можно ближе к нижней части ячейки;
  • , середина , которая будет центрировать текст в ячейке;
  • и top , которые поместят текст как можно ближе к верхней части ячейки.
Примечание:
  • Не пытайтесь установить свойство с вертикальным выравниванием для селектора, дающего элемент . Поскольку элементов не являются потомками элемента, они не наследуют его.
  • Если в таблице не используется атрибут colspan , используйте селектор CSS td: nth-child (an + b) для каждого столбца, где a - общее количество столбцов в таблице, а b - порядковый номер. положение столбца в таблице. Только после этого селектора можно использовать свойство с вертикальным выравниванием .
  • Если в таблице используется атрибут colspan , эффект может быть достигнут путем объединения соответствующих селекторов атрибутов CSS, таких как [colspan = n] , хотя это не тривиально.

Примеры

См. Страницу <таблица> с примерами <группа> .

Технические характеристики

Совместимость браузера

Обновление данных о совместимости GitHub браузер 9062 Android
Рабочий стол Мобильный
Chrome Edge Firefox Internet Explorer Opera Safari
Android для браузера 90fo2 906 Android 906 Android для браузера 90fo2 906 Android Android Firefox 9025 для Android Android Firefox для Android Android Firefo для Android 906 Android Firefox для Android Android Firefo для Android 906 Android для Android
Android для Android 906 Android Android-браузер Firefox 9024 для Android Android 906 Android 9025 для Android
браузер для Android Android 9025 Opera для Android Safari на iOS Samsung Интернет
colgroup Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да
выровнять Chrome ? Edge Полная поддержка 12 Firefox Нет поддержки
Нет поддержки
Примечания См. Ошибку 915
IE Полная поддержка Да Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки
Нет поддержки
Примечания См. Ошибку 915
Opera Android ? Safari iOS ? Samsung Интернет Android ?
bgcolor Chrome ? Edge ? Firefox Нет поддержки IE Полная поддержка Да Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки Opera Android ? Safari iOS ? Samsung Интернет Android ?
символ хром ? Edge Полная поддержка 12 Firefox Нет поддержки
Нет поддержки
Примечания См. Ошибку 2212
IE Полная поддержка Да Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки
Нет поддержки
Примечания См. Ошибку 2212
Opera Android ? Safari iOS ? Samsung Интернет Android ?
charoff Chrome ? Edge Полная поддержка 12 Firefox Нет поддержки
Нет поддержки
Примечания См. Ошибку 2212
IE Полная поддержка Да Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки
Нет поддержки
Примечания См. Ошибку 2212
Opera Android ? Safari iOS ? Samsung Интернет Android ?
пролет хром Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да
valign Chrome ? Edge Полная поддержка 12 Firefox Нет поддержки
Нет поддержки
Примечания См. Ошибку 915
IE Полная поддержка Да Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Нет поддержки
Нет поддержки
Примечания См. Ошибку 915
Opera Android ? Safari iOS ? Samsung Интернет Android ?
ширина Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка Да

Легенда

Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Совместимость неизвестна
Совместимость неизвестна
Устаревший.Не для использования на новых сайтах.
Устаревший. Не для использования на новых сайтах.
См. Примечания к реализации.
См. Примечания к реализации.

См. Также

  • CSS-свойства и псевдоклассы, которые могут быть особенно полезны для стилизации элемента :
    • свойство width для управления шириной столбца;
    • псевдокласс : nth-child, чтобы установить выравнивание в ячейках столбца;
    • свойство text-align для выравнивания содержимого всех ячеек по одному и тому же символу, например '.».

HTML: тег

HTML5 Document

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом:

  


<Голова>

 Пример HTML5 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<Таблица>
  <COLGROUP>
    <col span = "3">
    <Цв>
  </ COLGROUP>
  <THEAD>
    <TR>
      <Й> Пункт </ е>
      <Й> Количество </ й>
      <Й> Цена </ й>
      <Й> Итого </ е>
    </ TR>
  </ THEAD>
  <TBODY>
    <TR>
      <TD> Бананы </ TD>
      <TD> 5 </ TD>
      <TD> $ 12 </ TD>
      <TD> $ 60 </ TD>
    </ TR>
  </ TBODY>
</ Table>
</ Body>

</ html> </code> </pre>
   <p> В этом примере документа HTML5 мы создали таблицу с разделами <colgroup>, <thead> и <tbody>.В разделе <colgroup> мы использовали два тега <col>. Первый тег <col> группирует первые три столбца и устанавливает цвет фона столбцов на # FFF9C4. Второй тег <col> группирует 4-й столбец и устанавливает его цвет фона на желтый. </p>

 <h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4>
   <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <colgroup> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN "" http://www.w3.org/TR/html4/loose.dtd ">
<HTML>

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8">
<title> HTML 4.01 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<Таблица>
  <COLGROUP>
    <col span = "3">
    <Цв>
  </ COLGROUP>
  <THEAD>
    <TR>
      <Й> Пункт </ е>
      <Й> Количество </ й>
      <Й> Цена </ й>
      <Й> Итого </ е>
    </ TR>
  </ THEAD>
  <TBODY>
    <TR>
      <TD> Бананы </ TD>
      <TD> 5 </ TD>
      <TD> $ 12 </ TD>
      <TD> $ 60 </ TD>
    </ TR>
  </ TBODY>
</ Table>
</ Body>

</ html> </code> </pre>
   <p> В этом HTML 4.01 Пример переходного документа, мы создали таблицу с разделами <colgroup>, <thead> и <tbody>. В разделе <colgroup> мы использовали два тега <col>. Первый тег <col> группирует первые три столбца и устанавливает цвет фона столбцов на # FFF9C4. Второй тег <col> группирует 4-й столбец и устанавливает его цвет фона на желтый. </p>

 <h4><span class="ez-toc-section" id="XHTML_10"> XHTML 1.0 Переходный документ </span></h4>
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, твой тег <colgroup> может выглядеть так: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> XHMTL 1.0 Переходный пример от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<Таблица>
  <COLGROUP>
    <col span = "3" />
    <col />
  </ COLGROUP>
  <THEAD>
    <TR>
      <Й> Пункт </ е>
      <Й> Количество </ й>
      <Й> Цена </ й>
      <Й> Итого </ е>
    </ TR>
  </ THEAD>
  <TBODY>
    <TR>
      <TD> Бананы </ TD>
      <TD> 5 </ TD>
      <TD> $ 12 </ TD>
      <TD> $ 60 </ TD>
    </ TR>
  </ TBODY>
</ Table>
</ Body>

</ html> </code> </pre>
   <p> В этом XHTML 1.В примере с переходным документом мы создали таблицу с разделами <colgroup>, <thead> и <tbody>. В разделе <colgroup> мы использовали два тега <col>. Первый тег <col> группирует первые три столбца и устанавливает цвет фона столбцов на # FFF9C4. Второй тег <col> группирует 4-й столбец и устанавливает его цвет фона на желтый. </p>
   <h4><span class="ez-toc-section" id="XHTML_10-2"> XHTML 1.0 Строгий документ </span></h4>
   <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <colgroup> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Строгий // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Строгий пример XHTML 1.0 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<Таблица>
  <COLGROUP>
    <col span = "3" />
    <col />
  </ COLGROUP>
  <THEAD>
    <TR>
      <Й> Пункт </ е>
      <Й> Количество </ й>
      <Й> Цена </ й>
      <Й> Итого </ е>
    </ TR>
  </ THEAD>
  <TBODY>
    <TR>
      <TD> Бананы </ TD>
      <TD> 5 </ TD>
      <TD> $ 12 </ TD>
      <TD> $ 60 </ TD>
    </ TR>
  </ TBODY>
</ Table>
</ Body>

</ html> </code> </pre>
   <p> В этом XHTML 1.0 Пример строгого документа, мы создали таблицу с разделами <colgroup>, <thead> и <tbody>. В разделе <colgroup> мы использовали два тега <col>. Первый тег <col> группирует первые три столбца и устанавливает цвет фона столбцов на # FFF9C4. Второй тег <col> группирует 4-й столбец и устанавливает его цвет фона на желтый. </p>
 <h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1 Документ </span></h4>
   <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <colgroup> может выглядеть следующим образом: </p>
   <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN "" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">

<Голова>
<meta http-equ = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Пример XHTML 1.1 от www.techonthenet.com </ title>
</ HEAD>

<Тело>
<Таблица>
  <COLGROUP>
    <col span = "3" />
    <col />
  </ COLGROUP>
  <THEAD>
    <TR>
      <Й> Пункт </ е>
      <Й> Количество </ й>
      <Й> Цена </ й>
      <Й> Итого </ е>
    </ TR>
  </ THEAD>
  <TBODY>
    <TR>
      <TD> Бананы </ TD>
      <TD> 5 </ TD>
      <TD> $ 12 </ TD>
      <TD> $ 60 </ TD>
    </ TR>
  </ TBODY>
</ Table>
</ Body>

</ html> </code> </pre>
   <p> В этом XHTML 1.1 Пример документа: мы создали таблицу с разделами <colgroup>, <thead> и <tbody>. В разделе <colgroup> мы использовали два тега <col>. Первый тег <col> группирует первые три столбца и устанавливает цвет фона столбцов на # FFF9C4. Второй тег <col> группирует 4-й столбец и устанавливает его цвет фона на желтый. </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<h2><span class="ez-toc-section" id="HTML-4"> HTML-тег </span></h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>





 <p> Тег HTML <code> <colgroup> </code> представляет группу из одного или нескольких столбцов в таблице в документе HTML. </p>
 <p> Его можно использовать для применения стилей к одному или нескольким столбцам. Это может быть удобно, поскольку устраняет необходимость применять стили на отдельном уровне <code> <td> </code>. </p>
 <p> Тег <code> <colgroup> </code> должен использоваться как дочерний элемент элемента <code> <table> </code>, после любых <code> элементов <caption> </code> и перед любыми <code> <thead> </code>, <code> <tbody> </code>, <code> <tfoot> </code> и <code> <tr> </code> элементов.</p>



 <h3><span class="ez-toc-section" id="i-33"> Синтаксис </span></h3>
 <p> Тег <code> <colgroup> </code> записывается как <code> <colgroup> </code> <code> </ colgroup> </code>. Он может иметь либо атрибут <code> span </code>, который указывает, сколько столбцов нужно охватить, либо он может содержать один или несколько тегов <code> <col> </code>, которые могут использоваться для представления различных столбцов в элементе <code> <colgroup> </code>. </p>
 <p> Нравится: </p>

      
    

                  

                  
                   
                    
                   
                    
                   
                    
                  
                
                 <p>



                
<Таблица>
<colgroup span = "">
</ COLGROUP>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
</ Table>





                
                
                      
                
                 </p>
                
 
            



 <p> или это: </p>

                
                 <p>



                
<Таблица>
<COLGROUP>
<Цв> </ Col>
<Цв> </ Col>
<Цв> </ Col>
</ COLGROUP>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
</ Table>





                
                
                      
                
                 </p>
                
 
            




 <h3><span class="ez-toc-section" id="i-34"> Примеры </span></h3>
 <h4><span class="ez-toc-section" id="i-35"> Базовое использование тега </span></h4>
 <p> В этом примере мы используем тег <code> <colgroup> </code>, чтобы охватить первые два столбца таблицы из трех столбцов (и мы применяем к ним цвет фона).</p>

          
          
          
          
        

                

                  


                    
                    
                    


                    
                    
                    
                    
                        
                        
                         <p>

                            <! DOCTYPE html>
<Название> Пример </ название>
<Стиль>
таблица {border-collapse: collapse;}
td, th {border: 1px solid #ccc;}
</ Стиль>
<Таблица>
<colgroup span = "2"> </ colgroup>
<TR>
<th> Заголовок 1 </ th>
<th> Заголовок 2 </ th>
<th> Заголовок 3 </ th>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
</ Table>

                         </p>
                        

                        
                        
                        
                        
                    
                  
                
                
                
                
                
                              
                


            
             



 <h4><span class="ez-toc-section" id="i-36"> Несколько <code> <colgroup> </code> элементов </span></h4>
 <p> Вы можете использовать несколько тегов <code> <colgroup> </code> для представления различных групп столбцов в таблице.Здесь мы используем два элемента <code> <colgroup> </code>; первый представляет первые два столбца, а второй представляет третий столбец. </p>


                

                  


                    
                    
                    


                    
                    
                    
                    
                        
                        
                         <p>

                            <! DOCTYPE html>
<Название> Пример </ название>
<Стиль>
таблица {border-collapse: collapse;}
td, th {border: 1px solid #ccc;}
</ Стиль>
<Таблица>
<colgroup span = "2"> </ colgroup>
<COLGROUP> </ COLGROUP>
<TR>
<th> Заголовок 1 </ th>
<th> Заголовок 2 </ th>
<th> Заголовок 3 </ th>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
</ Table>

                         </p>
                        

                        
                        
                        
                        
                    
                  
                
                
                
                
                
                              
                


            
             



 <h4><span class="ez-toc-section" id="i-37"> Тег <code> <col> </code> </span></h4>
 <p> Если вам нужно применить различные свойства к столбцу внутри группы, вы можете использовать тег <code> <col> </code> внутри тега <code> <colgroup> </code>.</p>
 <p> Нравится: </p>


                

                  


                    
                    
                    


                    
                    
                    
                    
                        
                        
                         <p>

                            <Стиль>
таблица, тд, тыс
    граница: 1px сплошной черный;
}
</ Стиль>
<Таблица>
<COLGROUP>
<Цв>
<col span = "3">
<Цв>
</ COLGROUP>
<TR>
<th> Заголовок 1 </ th>
<th> Заголовок 2 </ th>
<th> Заголовок 3 </ th>
<th> Заголовок 4 </ th>
<th> Заголовок 5 </ th>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
<TR>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
<TD> Ячейка </ TD>
</ TR>
</ Table>

                         </p>
                        

                        
                        
                        
                        
                    
                  
                
                
                
                
                
                              
                


            
             


 <h3><span class="ez-toc-section" id="i-38"> атрибутов </span></h3>
 <p> Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.</p>

 <p> Элемент <code> <colgroup> </code> принимает следующие атрибуты. </p>



 <table>
<tr>
<th> Атрибут </th> <th> Описание </th>
</tr>
<tr>
<td> <code> span </code> </td> <td> Указывает, сколько столбцов нужно охватить. Этот атрибут не следует использовать, если в этом теге <code> <colspan> </code> есть <code> элемента <col> </code>. Значение этого атрибута должно быть действительным неотрицательным целым числом больше нуля.</td>
</tr>
 </table>


 <h4><span class="ez-toc-section" id="i-39"> Глобальные атрибуты </span></h4>
 <p> Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом <code> <colgroup> </code>, а также со всеми другими тегами HTML. </p>

 <ul>
 <li> <code> accesskey </code> </li>
 <li> <code> автокапитализировать </code> </li>
 <li> <code> класс </code> </li>
 <li> <code> contenteditable </code> </li>
 <li> <code> data- * </code> </li>
 <li> <code> dir </code> </li>
 <li> <code> Draggable </code> </li>
 <li> <code> скрыто </code> </li>
 <li> <code> id </code> </li>
 <li> <code> режим ввода </code> </li>
 <li> <code> является </code> </li>
 <li> <code> Itemid </code> </li>
 <li> <code> itemprop </code> </li>
 <li> <code> itemref </code> </li>
 <li> <code> itemscope </code> </li>
 <li> <code> itemtype </code> </li>
 <li> <code> lang </code> </li>
 <li> <code> часть </code> </li>
 <li> <code> слот </code> </li>
 <li> <code> проверка орфографии </code> </li>
 <li> <code> стиль </code> </li>
 <li> <code> tabindex </code> </li>
 <li> <code> название </code> </li>
 <li> <code> перевод </code> </li>
 </ul>



 <p> Полное объяснение этих атрибутов см. В разделе Глобальные атрибуты HTML 5.</p>

 <h4><span class="ez-toc-section" id="i-40"> Обработчики событий </span></h4>
 <p> Атрибуты содержимого обработчика событий позволяют вам вызывать скрипт из вашего HTML. Сценарий вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с различным событием. </p>
 <ul>
 <li> <code> онаборт </code> </li>
 <li> <code> onauxclick </code> </li>



 <li> <code> onblur </code> </li>
 <li> <code> oncancel </code> </li>
 <li> <code> oncanplay </code> </li>
 <li> <code> на сайте </code> </li>
 <li> <code> onchange </code> </li>
 <li> <code> onclick </code> </li>
 <li> <code> onclose </code> </li>
 <li> <code> oncontextmenu </code> </li>
 <li> <code> онкопия </code> </li>
 <li> <code> oncuechange </code> </li>
 <li> <code> oncut </code> </li>
 <li> <code> ondblclick </code> </li>
 <li> <code> ondrag </code> </li>
 <li> <code> ondragend </code> </li>
 <li> <code> ondragenter </code> </li>
 <li> <code> ondragexit </code> </li>
 <li> <code> ondragleave </code> </li>
 <li> <code> ondragover </code> </li>
 <li> <code> ondragstart </code> </li>
 <li> <code> ondrop </code> </li>
 <li> <code> ondurationchange </code> </li>
 <li> <code> односторонний </code> </li>
 <li> <code> onended </code> </li>
 <li> <code> ошибка </code> </li>
 <li> <code> onfocus </code> </li>
 <li> <code> onformdata </code> </li>



 <li> <code> на входе </code> </li>
 <li> <code> oninvalid </code> </li>
 <li> <code> onkeydown </code> </li>
 <li> <code> onkeypress </code> </li>
 <li> <code> onkeyup </code> </li>
 <li> <code> onlanguagechange </code> </li>
 <li> <code>, нагрузка </code> </li>
 <li> <code> onloadeddata </code> </li>
 <li> <code> загруженных метаданных </code> </li>
 <li> <code> onloadstart </code> </li>



 <li> <code> onmousedown </code> </li>
 <li> <code> onmouseenter </code> </li>
 <li> <code> onmouseleave </code> </li>
 <li> <code> onmousemove </code> </li>
 <li> <code> onmouseout </code> </li>
 <li> <code> onmouseover </code> </li>
 <li> <code> onmouseup </code> </li>



 <li> <code>, паста </code> </li>
 <li> <code> onpause </code> </li>
 <li> <code> onplay </code> </li>
 <li> <code> игровой </code> </li>



 <li> <code> onprogress </code> </li>
 <li> <code> onratechange </code> </li>
 <li> <code> по умолчанию </code> </li>
 <li> <code> onresize </code> </li>



 <li> <code> onscroll </code> </li>
 <li> <code> на безопасностьполициальное нарушение </code> </li>
 <li> <code> в поисках </code> </li>
 <li> <code> onseeking </code> </li>
 <li> <code> onselect </code> </li>
 <li> <code> onslotchange </code> </li>
 <li> <code> установлено </code> </li>



 <li> <code> на подачу </code> </li>
 <li> <code> onsuspend </code> </li>
 <li> <code> ontimeupdate </code> </li>
 <li> <code> пуговица </code> </li>



 <li> <code> onvolumechange </code> </li>
 <li> <code> в ожидании </code> </li>
 <li> <code> на колесе </code> </li>
 </ul>

 <p> Большинство атрибутов содержимого обработчика событий можно использовать для всех элементов HTML, но некоторые обработчики событий имеют определенные правила относительно того, когда их можно использовать и к каким элементам они применимы.</p>
 <p> Подробнее см. В разделе Атрибуты содержимого обработчика событий HTML. </p>





,		</div><!-- .entry-content -->
	</div><!-- .entry-content-wrapper -->
</div>
</article><!-- #post -->

	<nav class="navigation post-navigation" role="navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/socialnye-knopki-ot-yandeksa-kak-dobavit-ikonki-socsetej-v-statyu-o-publichnom-cheloveke-na-viki-pri-poiske-cherez-yandeks-yandeks-znatoki.html" rel="prev">Социальные кнопки от яндекса – «Как добавить иконки соцсетей в статью о публичном человеке на Вики при поиске через Яндекс?» – Яндекс.Знатоки</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/chto-takoe-deg-spisok-matematicheskix-abbreviatur-vikipediya-deg-vikislovar.html" rel="next">Что такое deg: Список математических аббревиатур — Википедия – deg — Викисловарь</a></div></div>
	</nav><div id="comments" class="comments-area">

		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/colgroup-html-teg-html-spravochnik.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p>
<p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='19094' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form>	</div><!-- #respond -->
	
</div><!-- #comments -->		</main>
	</div>
	<div id="sidebar-primary" class="widget-area sidebar " role="complementary">
	<div class="sidebar-main"><div class="rtb_menu" style="display:block; background:#fff; margin: 1px auto"><center><div id="rtbBlock1">
    <div id="yandex_rtb_sidebar" class="yandex-adaptive classYandexRTB"></div>
</div>
<script type="text/javascript">
    (function(w, n) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-535903-5",
                renderTo: "yandex_rtb_sidebar",
                async: false,
                pageNumber: getRTBpageNumber( "R-A-535903-5" ),
                directSettings: {
                },
                onRender: function(data) {
                    if (data.product == "direct"){
                        document.getElementById("rtbBlock1").style.textAlign = "center";
                    }
                }
            });
        });
        document.write('<sc'+'ript type="text/javascript" src="//an.yandex.ru/system/context.js"></sc'+'ript>');
    })(this, "yandexContextSyncCallbacks");</script></center></div>
<section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/">
	<div class="form-content">
		<input type="text" placeholder="search.." name="s" id="s" value=""/>
		<input type="submit" value="Search" />
	</div>
</form>

</div></section><section id="custom_html-5" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:600px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="6847132033"
></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li>
<li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li>
<li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li>
<li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li>
<li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li>
<li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li>
<li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li>
<li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li>
<li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li>
<li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li>
</ul></div></div></section><section id="custom_html-3" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
</div></div></section><section id="custom_html-4" class="widget_text widget widget_custom_html"><div class="widget_text zita-widget-content"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-535903-5 -->
<div id="yandex_rtb_R-A-535903-5"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-535903-5",
                renderTo: "yandex_rtb_R-A-535903-5",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script></div></div></section></div>
</div>  </div>
</div>
<footer id="zita-footer">
	
	<div class="footer-wrap widget-area">
		
<div class="bottom-footer">
		 	<div class="bottom-footer-bar ft-btm-one">
		       <div class="container">
			      <div class="bottom-footer-container">
           © Компания <a href="http://вебджем.рф"> Вебджем.рф </a>  2009 - 2021 | Все права защищены.</a>
		           </div>
		       </div>
		    </div>
</div>
	</div>
	</footer>
		<style type="text/css">
							.pgntn-page-pagination {
					text-align: left !important;
				}
				.pgntn-page-pagination-block {
					width: 60% !important;
					padding: 0 0 0 0;
									}
				.pgntn-page-pagination a {
					color: #1e14ca !important;
					background-color: #ffffff !important;
					text-decoration: none !important;
					border: 1px solid #cccccc !important;
									}
				.pgntn-page-pagination a:hover {
					color: #000 !important;
				}
				.pgntn-page-pagination-intro,
				.pgntn-page-pagination .current {
					background-color: #efefef !important;
					color: #000 !important;
					border: 1px solid #cccccc !important;
									}
			.archive #nav-above,
					.archive #nav-below,
					.search #nav-above,
					.search #nav-below,
					.blog #nav-below,
					.blog #nav-above,
					.navigation.paging-navigation,
					.navigation.pagination,
					.pagination.paging-pagination,
					.pagination.pagination,
					.pagination.loop-pagination,
					.bicubic-nav-link,
					#page-nav,
					.camp-paging,
					#reposter_nav-pages,
					.unity-post-pagination,
					.wordpost_content .nav_post_link,.page-link,
					.page-links,#comments .navigation,
					#comment-nav-above,
					#comment-nav-below,
					#nav-single,
					.navigation.comment-navigation,
					comment-pagination {
						display: none !important;
					}
					.single-gallery .pagination.gllrpr_pagination {
						display: block !important;
					}		</style>
	<link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/pagination/css/nav-style.css?ver=5.7.2' type='text/css' media='all' />
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/jquery/ui/effect.min.js?ver=1.12.1' id='jquery-effects-core-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/comment-reply.min.js?ver=5.7.2' id='comment-reply-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/js/zita-menu.js?ver=5.7.2' id='zita-menu-js-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/js/zita-custom.js?ver=5.7.2' id='zita-custom-js-js'></script>
<script type='text/javascript' id='load-more-posts-js-js-extra'>
/* <![CDATA[ */
var wp_ajax_url = "https:\/\/xn--90abhccf7b.xn--p1ai\/wp-admin\/admin-ajax.php";
/* ]]> */
</script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/inc/pagination/js/load-more-posts.js?ver=0.1' id='load-more-posts-js-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/themes/zita/inc/pagination/js/infinite-scroll.js?ver=0.1' id='script_ajax-js'></script>
<script type='text/javascript' id='q2w3_fixed_widget-js-extra'>
/* <![CDATA[ */
var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-4"]}];
/* ]]> */
</script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-includes/js/wp-embed.min.js?ver=5.7.2' id='wp-embed-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
	<script>
	/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
	</script>
	</body>
</html>