Картинка в таблице html: Картинки в таблице | WebReference

Содержание

Особенности таблиц | htmlbook.ru

Чтобы понимать, что можно ожидать от таблиц при вёрстке, следует знать их явные и неявные особенности, которые перечислены далее.

Вложенные таблицы

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

Размеры таблицы

Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров:

ширина содержимого ячеек;
толщина всех границ между ячеек;
поля вокруг содержимого, устанавливаемые через атрибут cellpadding;
расстояние между ячейками, которое определяется значением cellspacing.

Если для таблицы установлена её ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры. Чтобы избежать указанной ситуации применяют несколько средств.

Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.

Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2.1).

Пример 2.1. Использование table-layout

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
   TD.dino { width: 200px; }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td><img src="images/dino.gif" 
      alt="Динозаврик" /></td>
    <td>...</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера зависит от браузера. В старых браузерах рисунок за пределами ячейки обрезается (рис. 2.1а), в современных браузерах рисунок выводится поверх второй ячейки (рис. 2.1б).

а. Вид таблицы в IE6, IE7, Firefox 2

б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

Рис. 2.1. Использование table-layout

Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden. При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.

TABLE {
  table-layout: fixed; /* Ячейки фиксированной ширины */
}
TD.dino {
  width: 200px;
  overflow: hidden;
}

Высота ячеек

Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.

Пример 2.2. Колонки одной высоты

XHTML 1.0CSS 2.1IE 9CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Высота ячеек</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   TD { 
    padding: 10px; /* Поля в ячейках */ 
   }
   TD.  content {
    background: #f0f0f0; /* Цвет фона левой колонки */
   }
   TD.menu {
    width: 120px; /* Ширина правой колонки*/
    background: #9c3022; /* Цвет фона правой колонки */
    color: #fff; /* Цвет текста */
    vertical-align: top;
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <p>Мясо отварить до готовности. Промыть свеклу, очистить, 
     нарезать соломкой и тушить с помидорами до полуготовности.</p>
     <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить 
     нарезанный дольками картофель, довести до кипения, опустить нарезанную 
     соломкой свежую капусту и варить 10-15 минут, добавить пассерованные 
     овощи, болгарский перец, нашинкованный тонкой соломкой, 
     специи и довести до готовности.</p>
     <p>Готовому борщу дать настояться в течение 20-25 минут. 
     При подаче к столу добавить сметану, мясо, зелень.</p>
    </td>
    <td>Борщ</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан на рис.

2.2.

Рис. 2.2. Макет, созданный с использованием таблицы

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

Порядок ячеек

Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо и сверху вниз (рис. 2.3).

Рис. 2.3. Порядок создания ячеек

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

Загрузка таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 Кб). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы. В обычной таблице браузер анализирует все ячейки и затем уже изменяет ширину колонок на основе этой информации. Включение table-layout со значением fixed меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.

таблицы

HTML по теме

Тег <col>
Тег <colgroup>
Тег <table>

CSS по теме

overflow
table-layout

Создание таблицы в HTML | HTML/xHTML

2020-08-07

В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.

Итак, как сделать таблицу в HTML?

Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:

<body>
<table>
<tr>
   <td>Столбец 1</td>
   <td>Столбец 2</td>
   <td>Столбец 3</td>
</tr>
</table>
</body>

В окне браузера только что созданная таблица выглядит следующим образом:

Таблица начинается с тега <table> и заканчивается парным ему </table>. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега <tr> и заканчивается </tr>.

Ячейки строки описываются слева направо с помощью тегов <td> и </td>. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.

Границы и рамки
Цвет фона и текста
- Отступы таблицы в HTML
- Выравнивание таблицы в HTML
- Вставка изображения в HTML таблицу
- Объединение ячеек в HTML таблице
Генераторы HTML таблиц

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

<body>
<table border="1">
<tr>
   <td>Столбец 1</td>
   <td>Столбец 2</td>
   <td>Столбец 3</td>
</tr>
</table>
</body>

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;

bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

В HTML отступы в таблице задаются с помощью тега <table>:

cellspacing — расстояние между границами соседних ячеек;
cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2. gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

left — выравнивание по левой границе;
right — выравнивание по правой границе;
center — выравнивание по центру.

Параметр valign может иметь такие значения:

bottom — выравнивание по нижней границе;
top — выравнивание по верхней границы;
middle — выравнивание посередине.

Пример:

<table border= "1">
 <td>Текст 1</td>
   <td align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега <td>.

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

width — ширина;
height — высота;
alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
title — подпись к картинке;
align — горизонтальное выравнивание;
valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.

Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.

Одним из наиболее распространенных генераторов таблиц является сервис http://www.2createawebsite.com/build/table_generator.html. ОН является зарубежным, настроек для генерации таблицы здесь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:

Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.

Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:

Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

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

Желаем успехов!

Вадим Дворниковавтор-переводчик

Как добавить изображение внутрь ячейки таблицы в HTML

В этой статье вы узнаете, как добавить изображения внутрь ячейки таблицы в HTML.

Используйте тег , чтобы добавить изображение внутри элемента в HTML.

Добавить изображение в ячейку таблицы

Имя	Местоположение	Фото
Апу Горай	Индия

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

Создайте таблицу с помощью тега и задайте ей границу 4 пикселей, используя атрибут border , чтобы мы могли видеть границу таблицы. < стол граница = "4" > < /таблица >
Затем внутри элемента таблицы создайте две строки, используя

Присвойте изображению высоту, используя атрибут height , а также ширину, используя атрибут width .

Нажмите кнопку Try it Yourself » , чтобы увидеть вывод кода.

Весь код вместе

  <  таблица   граница  =  "4"  > 
      <  тр  > 
          < -й  >  Имя  < /й  > 
          < -й  >  Местоположение  < /й  > 
          < -й  >  Фото  <  /th  > 
      <  /tr  > 
      <  тр  > 
          <  td  >  Апу Горай  <  / td  > 
          <  тд  >  Индия  <  / тд  > 
          <  td  >   <  img   src  =  "https  :  //app.3schools. in/logo.png"   высота  =  "100"   ширина  =  "100"  >   <  /td  > 
      <  /tr  > 
  <  /таблица  >

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

В приведенном ниже примере вы можете найти адаптивную HTML-таблицу, а внутри ячейки таблицы есть изображение. Нажмите на кнопку Try it Yourself » , чтобы просмотреть таблицу.

и второй
. `< стол граница = "4" > < TR > < /TR > < TR > < /TR > < /TR > .0058` Внутри первой строки
. Первый для имени , второй для местоположения и последний для изображения . `< стол граница = "4" > < тр > < -й > Имя < /й > < -й > Местоположение < /th > < -й > Изображение < /th > < /tr > < tr > < /tr > < /таблица >` Далее во второй строке
. Затем укажите имя как Апу Горай, местоположение как Индию и внутри последних	, создайте тег , чтобы добавить изображение внутрь этой ячейки. `< стол граница = "4" > < тр > < -й > Имя < /й > < -й > Местоположение < /й > < -й > Фото < /й > < /tr > < тр > < td > Апу Горай < / td > < тд > Индия < / тд > < TD > < IMG SRC = "https : //App.3schools.in/logo.png" Height = "100648 " " " " " " .0048 = "100" > < /td > < /tr > < /стол >` Тег	определяет каждую ячейку в таблице. Любые данные внутри

и второй

  <  стол   граница  =  "4"  > 
     < TR >   < /TR >     < TR >   < /TR >    < /TR >   .0058 
   
    Внутри первой строки

. Первый для имени , второй для местоположения и последний для изображения .

   <  стол   граница  =  "4"  > 
     <  тр  > 
      < -й  >  Имя  < /й  > 
      < -й  >  Местоположение  <  /th  > 
      < -й  >  Изображение  <  /th  > 
    <  /tr  >    <  tr  >   <  /tr  > 
  <  /таблица  >

Далее во второй строке

Затем укажите имя как Апу Горай, местоположение как Индию и внутри последних

, создайте тег , чтобы добавить изображение внутрь этой ячейки.

  <  стол   граница  =  "4"  > 
      <  тр  > 
          < -й  >  Имя  < /й  > 
          < -й  >  Местоположение  < /й  > 
          < -й  >  Фото  <  /й  > 
      <  /tr  > 
       <  тр  > 
          <  td  >  Апу Горай  <  / td  > 
          <  тд  >  Индия  <  / тд  > 
          < TD >   < IMG   SRC  =  "https :  //App.3schools.in/logo.png"   Height  =  "100648         "   " "   " "   " .0048 =  "100"  >   <  /td  > 
      <  /tr  >    <  /стол  >

Тег

определяет каждую ячейку в таблице.

Любые данные внутри

1:1	1:2	1:3	1:4
2:1		2:3	2:4
3:1	3:2	3:3	3:4
4 :1	4:2	4:3	4:4

В этой статье вы узнали, как добавить изображение в ячейку таблицы в HTML. Мы можем использовать онлайн-генератор таблиц для динамического создания таблицы.

3 ответа

${c[i]. author[0].name.$t} Связанные

Добавление изображения в ячейку таблицы в HTML

В вашем HTML есть несколько синтаксических ошибок.

Во-первых, URL-адрес изображения должен указывать на адрес в общедоступном Интернете. У пользователей, просматривающих вашу страницу, не будет вашего жесткого диска, поэтому указание на файл на локальном жестком диске не сработает. Замените C:\Pics фактическим URL-адресом изображения, а не путем в файловой системе машины разработки. Если вы хотите быть абсолютно уверенным, используйте другой компьютер и вставьте значение атрибута src тега img в адресную строку браузера. Если это работает там, то вы хорошо. Не то чтобы путь мог быть относительным и по-прежнему действительным, но тогда он должен быть связан с общедоступным URL-адресом веб-страницы, в которую он встроен.

Во-вторых, тег </code>. Вам нужно добавить этот тег, если вам нужен заголовок в браузере, и вы не можете его отформатировать.<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/cf.ppt-online.org/files/slide/p/p9NgRxUwY7OXeZcQzbBDEMTrPG5oSql2AkKFhI/slide-31.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/p/p9NgRxUwY7OXeZcQzbBDEMTrPG5oSql2AkKFhI/slide-31.jpg' /></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/kartinka-v-tablicze-html-kartinki-v-tablicze-webreference.html" data-text="Картинка в таблице html: Картинки в таблице | WebReference" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/kartinka-v-tablicze-html-kartinki-v-tablicze-webreference.html" data-text="Картинка в таблице html: Картинки в таблице | WebReference" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/kartinka-v-tablicze-html-kartinki-v-tablicze-webreference.html" data-text="Картинка в таблице html: Картинки в таблице | WebReference" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/kartinka-v-tablicze-html-kartinki-v-tablicze-webreference.html" data-text="Картинка в таблице html: Картинки в таблице | WebReference" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/kak-nastroit-vremya-v-instagrame-na-telefone-instrukcziya-kak-nastroit-vremya-v-instagrame.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как настроить время в инстаграме на телефоне: Инструкция, как настроить время в Инстаграме</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/internet-magazin-v-fotoshope-kak-razrabotat-maket-dlya-internet-magazina-v-fotoshop-creativo-one.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Интернет магазин в фотошопе: Как разработать макет для интернет-магазина в Фотошоп / Creativo.one</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/kartinka-v-tablicze-html-kartinki-v-tablicze-webreference.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='30404' 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><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>Блог сумасшедшего сисадмина © 2025. Все права защищены.</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>   <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>  <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_7f58fea516d121f918d2c7f10ca22bf4.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="796f35e1885cbd132b73ad94-|49" defer></script>