Таблица с рамкой | htmlbook.ru

Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.

Для создания рамки применяется стилевое свойство border, которое добавляется к селектору TABLE. Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег <th>), как показано на рис. 1.

Рис. 1. Таблица с рамкой

В примере 1 показано, как создать такую простую таблицу.

Пример 1. Создание рамки вокруг таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячеек */
   }
   TH {
    text-align: left; /* Выравнивание по левому краю */
    background: black; /* Цвет фона */
    color: white; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>
(adsbygoogle = window.adsbygoogle || []).push({});

В данном примере выравнивание текста во всех ячейках происходит по левому краю, что не всегда удобно. На рис. 2 показана таблица, у которой содержимое ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается по левому краю.

Рис. 2. Таблица с рамкой

Изменение выравнивания происходит с помощью стилевого свойства text-align, при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2).

Пример 2. Таблица с выравниванием содержимого ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE { 
    width: 300px; /* Ширина таблицы */
    border: 2px solid black; /* Рамка вокруг таблицы */
    background: silver; /* Цвет фона таблицы */
   }
   TD, TH { 
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг содержимого ячеек */
   }
   TH { 
    background: #4682b4; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom: 2px solid black; /* Линия снизу */
   }
   .
lc { font-weight: bold; /* Жирное начертание текста */ text-align: left; /* Выравнивание по левому краю */ } </style> </head> <body> <table cellspacing="0"> <tr> <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th> </tr> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </table> </body> </html>

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

Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис.  3). При этом создание подобной таблицы не представляет особой сложности.

Рис. 3. Таблица с градиентным заголовком

При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис. 4.

Рис. 4. Заготовка для создания фона

Для добавления фона только к одной строке таблицы имеется несколько способов. Можно воспользоваться тегом <thead>, который предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Для этого тега добавляем стилевое свойство background, оно одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость (пример 3).

Пример 3. Использование фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 2px solid #2e8b57; /* Рамка вокруг таблицы */
   }
   THEAD {
    background: #2e8b57 url(images/tablebg.
gif) repeat-x; /* Параметры фона */ } TD, TH { padding: 3px; /* Поля вокруг содержимого ячеек */ text-align: center; /* Выравнивание по центру */ } .lc { font-weight: bold; /* Жирное начертание текста */ text-align: left; /* Выравнивание по левому краю */ } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th> </tr> </thead> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </table> </body> </html>

В данном примере тег <thead> охватывает только верхнюю строку таблицы с ее заголовком.

Для этого тега в стилях одновременно устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения изображений в браузере.

CSSтаблицы

HTML по теме

  • Тег <table>
  • Тег <td>
  • Тег <th>
  • Тег <thead>

CSS по теме

  • background
  • border
  • border-bottom
  • text-align

63. Рамки для таблиц, строк и ячеек в HTML — Таблицы — codebra

Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.

Создание рамки при помощи атрибута

Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:

Код HTML

<table width = "100%" border = "2">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Простой способ создать рамку вокруг элемента

Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:

Код CSS

td {
border: 5px solid #CCCCCC;
}

Рамка слева, справа, снизу и сверху

При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black; рамка справа border-right: 1px dotted #FF0000; рамка снизу border-bottom: 10px solid #000000; рамка сверху border-top: 1px solid green. Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:

Код CSS

table {
border-left: 5px solid #CCCCCC;
border-right: 5px solid #CCCCCC;
}
td {
border-top: 5px solid #CCCCCC;
border-bottom: 5px solid #CCCCCC;
}

Закругленные углы

Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius. Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

Код CSS

td {
border: 5px solid #CCCCCC;
border-radius: 10px;
}

Поля или внутренний отступ

Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding. Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

Код CSS

td {
border: 5px solid #CCCCCC;
border-radius: 10px;
padding: 10px;
}

Похожие уроки и записи блога

Свойство background для работы с фономЦвета и фон

Знакомимся с Flexbox в CSSЗнакомство с Flexbox

Первое знакомство с PythonЗнакомство с Python

Тег TR в HTML таблицахТаблицы

Свойство border для создания границОтступы, рамки, поля

Написание модулей в PythonЗнакомство с Python

Работа с файлами в Python Знакомство с Python

Обработка исключений (try/except) в PythonЗнакомство с Python

Погружение в PythonЗнакомство с Python

Предыдущий урок «62. Практика 2: colspan и rowspan» Следующий урок «64. Cтруктурирование HTML таблиц»

»

В атрибутах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут
Быстрое и простое создание HTML-таблицы с помощью нашего примера кода
Что делает
?
Атрибут рамки использовался для определения видимых границ таблицы. Теперь он устарел и больше не должен использоваться.

FRAME определяет видимость внешних границ. На следующих нескольких страницах мы рассмотрим все девять значений FRAME . FRAME и FRAME имеют раздражающий способ изменения значений по умолчанию друг друга. Чтобы упростить вам жизнь, вот эмпирическое правило: если вы используете КАДР , также используйте КАДР и ГРАНИЦА . Легче не запутаться.

Содержание

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10 Значения атрибута frame
  • ВЫШЕ означает, что граница должна быть только поверх таблицы.
     

    Применение атрибута к таблице, как показано в приведенном выше коде, дает нам странную таблицу

    Имя Еда
    Starflower stir fied tofu
    Miko vegetable rice soup
    Andy hummus
    Ping french toast
    НИЖЕ означает, что должна отображаться только нижняя граница:
     

    Использование этого дает нам эту неэстетичную таблицу:

    Имя Food
    Starflower stir fied tofu
    Miko vegetable rice soup
    Andy hummus
    Ping french toast

    BORDER означает то же самое, что и FRAME=BOX .

    FRAME=BOX означает, что границы должны быть со всех четырех сторон. BOX обычно используется в сочетании с RULES=NONE для создания таблицы с внешними границами, но без внутренних границ:
     

    Использование этого пара атрибут-значение дает нам эту таблицу:

    Name Food
    Starflower stir fied tofu
    Miko vegetable rice soup
    Andy hummus
    Ping french toast

    < table frame="hsides">
    FRAME=HSIDES ( H по горизонтали SIDES ) означает, что должны быть границы на верхней и нижней сторонах таблицы.
     

    Использование атрибута дает нам следующую таблицу:

    90 перемешанный тофу
    Имя Еда
    Звездоцвет Miko vegetable rice soup
    Andy hummus
    Ping french toast

    FRAME=LHS ( L eft H и S ide) означает, что с левой стороны таблицы должна быть только внешняя граница.
     

    Использование атрибута дает следующую таблицу:

    37 7 9069 9000 Мико
    Имя Еда
    Звездоцвет овощной рисовый суп
    Энди хумус
    PING Французский тост

    <кадра с таблицей = ”RHS”>
    рама = RHS ( R Iight H и S IDE *) означает, что будет только OTTER HID с левой стороны стола.
     

    Использование атрибута дает следующую таблицу:

    111111111111111111. внешняя граница.

     
    Имя Еда
    Звездоцвет перемешанный тофу
    Miko Овощный рисовый суп
    ANDY ХУММС
    PING FRENCH TOAST

    Использование атрибута дает следующую таблицу:

    Имя Еда
    Starflower stir fied tofu
    Miko vegetable rice soup
    Andy hummus
    Ping french toast

    FRAME=VSIDES ( V ertical SIDES ) означает, что слева и справа от таблицы должны быть границы.

     

    Использование атрибута создает эту таблицу:

    Name Food
    Starflower stir fied tofu
    Miko vegetable rice soup
    Andy hummus
    Ping french toast

    Values кадра

    Атрибут
    Имя значения Примечания
    hsides Атрибут frame использовался в элементе для управления отображением внешней границы. Значение frame=»hsides» указывает, что границы должны быть нарисованы сверху и снизу таблицы. Этот атрибут устарел в HTML5 и больше не должен использоваться. Чтобы добиться эффектов границ на таблицах, используйте CSS.
    void
    vsides

    Адам Вуд

    Адам — технический писатель, специализирующийся на документации для разработчиков и учебных пособиях.

    Search HTML.com

    Search for:

    Most Popular

    • Тег HTML
    • Тег HTML Body: Master The Most Important HTML Element Now
    • Тег HTML</li><li> Элемент HTML P: Вот код Определение текста абзаца</li><li><meta> Тег HTML</li></ul><center/></td></table><h2><span class="ez-toc-section" id="_HTML"> Атрибут рамки таблицы HTML </span></h2><p> ❮ Тег HTML<table></p><h4><span class="ez-toc-section" id="i-8"> Пример </span></h4><p> Отображение только внешних границ таблицы:</p><p> <кадр таблицы="коробка"> <br/><tr> <br/><th>Месяц</th> <br/><th>Экономия</th> <br/></tr> <br/><tr> <br/><td>Январь</td><center><ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> <br/><td>100 долларов США</td> <br/></tr> <br/> </таблица></p><p data-readability-styled="true"> Попробуйте сами »</p><hr/><h3><span class="ez-toc-section" id="i-9"> Определение и использование </span></h3><p> Атрибут фрейма<table> не поддерживается в HTML5.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/f/a/d/fad7a9b342f32abb98c437c6b046e9ee.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/f/a/d/fad7a9b342f32abb98c437c6b046e9ee.jpeg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/html-ramka-tabliczy-tablicza-s-ramkoj-htmlbook-ru.html" data-text="Html рамка таблицы: Таблица с рамкой | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/html-ramka-tabliczy-tablicza-s-ramkoj-htmlbook-ru.html" data-text="Html рамка таблицы: Таблица с рамкой | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/html-ramka-tabliczy-tablicza-s-ramkoj-htmlbook-ru.html" data-text="Html рамка таблицы: Таблица с рамкой | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/html-ramka-tabliczy-tablicza-s-ramkoj-htmlbook-ru.html" data-text="Html рамка таблицы: Таблица с рамкой | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/zashifrovat-v-md5-shifrovanie-md5.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Зашифровать в md5: Шифрование MD5</span></a></li><li class="previous"><a href="https://ylianova.ru/sajt-2/dzhimdo-sozdat-sajt-besplatno-na-russkom-yazyke-sozdat-sajt-besplatno-s-jimdo-2.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Джимдо создать сайт бесплатно на русском языке: Создать сайт бесплатно с Jimdo</span></a></li></ul><section id="comments" class="themeform"><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/html-ramka-tabliczy-tablicza-s-ramkoj-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><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="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="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" 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='29610' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <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://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_beb165ebcab31049706e573299ff2247.js"></script></body></html>