Рамка таблицы html: Таблица с рамкой | htmlbook.ru

Таблица с рамкой | 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>

В данном примере выравнивание текста во всех ячейках происходит по левому краю,
что не всегда удобно. На рис. 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

Сетка таблицы | htmlbook.ru

Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками
таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется
по умолчанию, если включить отображение границ с помощью атрибута border
тега <table>. Однако такие линии отображаются
по-разному в различных браузерах, поэтому применение стилей не только позволит
удобно управлять видом таблиц, но и сделает их однотипными.

Для создания таблицы показанной на рис.  1 потребуется всего ничего: установить
стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse.

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD
или TH между ячейками возникают двойные линии, которые
образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло,
для селектора TABLE указывается свойство border-collapse
со значением collapse, как показано в примере 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-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
   }
   TH {
    background: #b0e0e6; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <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>

В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th>)
через свойство background.

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии
внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет,
совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан
белым и такого же цвета используется граница, которая добавляется к селектору
TABLE.

Пример 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">
   BODY {
    background: white; /* Цвет фона веб-страницы */
   }
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    border: 2px solid white; /* Прячем рамку вокруг таблицы */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid maroon; /* Параметры рамки */
    text-align: left; /* Выравнивание по левому краю */
   }
  </style>
 </head>
 <body>
  <table>
   <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>

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

CSSтаблицы

HTML по теме

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

CSS по теме

  • background
  • border
  • border-collapse

»

В атрибутах HTML

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

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

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

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

Содержание

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7 <Таблица Frame = ”RHS”>
  • 8
  • 9
  • 10 Значения атрибута кадры
  • <Таблица frame="выше">

    ВЫШЕ означает, что граница должна быть только поверх таблицы.

     

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

    9 0071

    Имя Еда
    Звездоцвет Жареный тофу
    Мико Овощной рисовый суп
    Энди Хумус
    Пинг Французский тост
    НИЖЕ означает, что должна отображаться только нижняя граница:

     

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

    900 63 хумус

    Имя Еда
    Звездоцвет Тофу
    Мико Овощной рисовый суп
    Энди
    пинг французский тост

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

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

     

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

    Наименование Продукты питания
    Звездоцвет жареный тофу
    Мико овощной рисовый суп
    Энди хумус
    Пинг французский тост

    < table frame="hsides">

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

     

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

    90 101

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

     

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

    Мико овощной рисовый суп
    Энди хумус
    Ping французский тост

    <стол кадра=”правая сторона”>

    КАДР=правая сторона ( R свет H 9000 7 и S ide *) означает, что должна быть только внешняя граница с левой стороны стола.

     

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

    Мико овощной рисовый суп
    Энди хумус
    пинг французский toast

    FRAME=VOID означает, что не должно быть внешняя граница.

     

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

    9006 3 Ping
    Имя Еда
    Starflower жареный тофу
    Мико овощной рисовый суп
    Andy хумус
    французский тост

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

     

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

    Название Продукты питания
    Звездоцвет жареный тофу
    Мико овощной рисовый суп
    Энди хумус
    Пинг французский тост

    Значения кадра

    Атрибут

    Имя значения Примечания
    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> <p> <center/> </td> </table> <h2> Атрибут рамки таблицы HTML </h2> <p> ❮ Тег HTML </p> <table> <h4> Пример </h4> <p> Отображение только внешних границ таблицы: </p> <p> <кадр таблицы="коробка"> </p> <tr></p> <th>Месяц</th> <p></p> <th>Экономия</th> <p></p> </tr> <p></p> <tr></p> <td>Январь</td> <p></p> <td>100 долларов США</td> <p></p> </tr> <p> </таблица></p> <p data-readability-styled="true"> Попробуйте сами » </p> <hr/> <h3> Определение и использование </h3> <p> Атрибут фрейма </p> <table> не поддерживается в HTML5.<br /> Вместо этого используйте CSS. </p> <p> Атрибут frame указывает, какие части внешних границ таблицы должны быть видны.<img loading='lazy' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="/800/600/http/2.bp.blogspot.com/-1d1_-SKOBF0/VyG0PyFV70I/AAAAAAAAJP0/wYwCp36BffEOK60PHOJuNl4ihTWimsOcwCKgB/w1684-h1069-p-k-no-nu/New%2BPicture%2B%25285%2529.bmp" /><noscript><img loading='lazy' src='/800/600/http/2.bp.blogspot.com/-1d1_-SKOBF0/VyG0PyFV70I/AAAAAAAAJP0/wYwCp36BffEOK60PHOJuNl4ihTWimsOcwCKgB/w1684-h1069-p-k-no-nu/New%2BPicture%2B%25285%2529.bmp' /></noscript></p> </div><!-- .entry-content --> <footer class="entry-meta"> This entry was posted in <a href="https://chevengur.info/category/populyarnoe" rel="category tag">Популярное</a> on <a href="https://chevengur.info/populyarnoe/ramka-tablitsy-html-tablitsa-s-ramkoj-htmlbook-ru.html" title="2:13 am" rel="bookmark"><time class="entry-date" datetime="2023-07-23T02:13:45+00:00">July 23, 2023</time></a><span class="by-author"> by <span class="author vcard"><a class="url fn n" href="https://chevengur.info/author/alexxlab" title="View all posts by alexxlab" rel="author">alexxlab</a></span></span>. </footer><!-- .entry-meta --> </article><!-- #post --> <nav class="nav-single"> <h3 class="assistive-text">Post navigation</h3> <span class="nav-previous"><a href="https://chevengur.info/populyarnoe/luchshij-telefon-do-30-tysyach-kakoj-gadzhet-luchshe-kupit-vesnoj-2023-goda.html" rel="prev"><span class="meta-nav">←</span> Лучший телефон до 30 тысяч: какой гаджет лучше купить весной 2023 года</a></span> <span class="nav-next"><a href="https://chevengur.info/populyarnoe/kak-snimat-na-telefon-pod-vodoj-kak-snimat-na-smartfon-pod-vodoj.html" rel="next">Как снимать на телефон под водой: Как снимать на смартфон под водой? <span class="meta-nav">→</span></a></span> </nav><!-- .nav-single --> <div id="comments" class="comments-area"> </div><!-- #comments .comments-area --> </div><!-- #content --> </div><!-- #primary --> <div id="secondary" class="widget-area" role="complementary"> <aside id="categories-3" class="widget widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li class="cat-item cat-item-1"><a href="https://chevengur.info/category/uncategorized">Uncategorized</a> </li> <li class="cat-item cat-item-9"><a href="https://chevengur.info/category/aksessuary">Аксессуары</a> </li> <li class="cat-item cat-item-7"><a href="https://chevengur.info/category/videokamery">Видеокамеры</a> </li> <li class="cat-item cat-item-10"><a href="https://chevengur.info/category/monitory">Мониторы</a> </li> <li class="cat-item cat-item-11"><a href="https://chevengur.info/category/noutbuki">Ноутбуки</a> </li> <li class="cat-item cat-item-5"><a href="https://chevengur.info/category/obektivy">Объективы</a> </li> <li class="cat-item cat-item-3"><a href="https://chevengur.info/category/populyarnoe">Популярное</a> </li> <li class="cat-item cat-item-8"><a href="https://chevengur.info/category/printery">Принтеры</a> </li> <li class="cat-item cat-item-6"><a href="https://chevengur.info/category/smartfony">Смартфоны</a> </li> <li class="cat-item cat-item-4"><a href="https://chevengur.info/category/fotoapparaty">Фотоаппараты</a> </li> </ul> </aside> </div><!-- #secondary --> </div><!-- #main .wrapper --> <footer id="colophon" role="contentinfo"> <div class="site-info"> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <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, .post-nav-links, .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://chevengur.info/wp-content/plugins/pagination/css/nav-style.css?ver=6.3.1' type='text/css' media='all' /> <script type='text/javascript' src='https://chevengur.info/wp-content/themes/chevengurinfo/js/navigation.js?ver=20141205' id='twentytwelve-navigation-js'></script> <script type='text/javascript' src='https://chevengur.info/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.3.0' id='q2w3_fixed_widget-js'></script> <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> <script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://chevengur.info/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script></body> </html>