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

Leave a Comment / Html / By /

Содержание

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.
Атрибуты
АтрибутЗначениеОписание
alignleft
right
center
justify
char		Не поддерживается в HTML5.
Выравнивает содержимое в группе столбцов
charcharacterНе поддерживается в HTML5.
Выравнивает содержимое в группе столбцов по символу
charoffnumberНе поддерживается в HTML5.
Задает число знаков, содержимое будет выровнено по символу, заданный атрибутом char
spannumberЗадает количество столбцов, которые должны охватывать группа столбцов
valigntop
middle
bottom
baseline		Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в группе столбцов
widthpixels
%
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><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></div></div></article><nav class="navigation post-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-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" 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" autocomplete="name" 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" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></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></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div>
<script type="text/javascript">
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins");
                    g.className = "adsbygoogle";
                    g.style.display = "inline";
                        g.style.width = "300px";
                        g.style.height = "600px";
                        g.setAttribute("data-ad-slot", "9935184599");
                    g.setAttribute("data-ad-client", "ca-pub-1812626643144578");
                    g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php");
                    document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g);
                    (adsbygoogle = window.adsbygoogle || []).push({}); }})});

window.addEventListener("load", () => {
var ins = document.getElementById("yandex_rtb_R-A-744004-7");
if (ins.clientHeight == "0") {
ins.innerHTML = stroke2;
}
}, true);
</script><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="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></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 - 2025 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>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>
<!-- /noptimize --> <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8d75f16aef2ebb943ed80dfe-|49" defer></script>