Евгений Левашов (levashove) wrote,
Евгений Левашов
levashove

Как сделать таблицы в ЖЖ

Пост на заказ, так как попросили объяснить, как, собственно, сделать таблицы в ЖЖ. По сути это простейший HTML, но очень многие в этом совершенно не разбираются и требуют подробных инструкций. Но когда я сам полез разбираться, то оказалось, что ЖЖ не очень хорошо обрабатывает самые простые коды. В частности, в разных стилях они могут выглядеть по разному. Немного покопавшись в HTML предлагаю вам более менее универсальный вариант кода.

Итак, вот примеры таблиц. В одной просто текст, в другой я поставил фотографии.



ЗАГОЛОВОК 1

ЗАГОЛОВОК 2

ЗАГОЛОВОК 3
СТРОКА 1 СТОЛБЕЦ 1 СТРОКА 1 СТОЛБЕЦ 2 СТРОКА 1 СТОЛБЕЦ 3
СТРОКА 2 СТОЛБЕЦ 1 СТРОКА 2 СТОЛБЕЦ 2 СТРОКА 2 СТОЛБЕЦ 3




По структуре они абсолютно одинаковы. Рассмотрим код первой с моими комментариями.

<table style="border-collapse:collapse;"><tbody> Открываем код таблицы.
<tr style="vertical-align:0;"> Открываем строку. Сделаем в каждом столбце заголовки. Если они не нужны - удаляем эти строчки.
<th style="border:1px solid black;padding:3px;">ЗАГОЛОВОК 1</th>
<th style="border:1px solid black;padding:3px;">ЗАГОЛОВОК 2</th>
<th style="border:1px solid black;padding:3px;">ЗАГОЛОВОК 3</th>
</tr>
Здесь <th style="border:1px solid black;padding:3px;"> это набор параметров отображения таблицы. Значение border определяет толщину линий, solid black - цвет линий, а padding - размер поля вокруг текста
Для каждого столбца делаем свой заголовок. Тегом </tr> закрываем строку.
<tr style="vertical-align:0;">
<td style="border:1px solid black;padding:3px;">СТРОКА 1 СТОЛБЕЦ 1</td>
<td style="border:1px solid black;padding:3px;">СТРОКА 1 СТОЛБЕЦ 2</td>
<td style="border:1px solid black;padding:3px;">СТРОКА 1 СТОЛБЕЦ 3</td>
</tr>
По аналогии с строкой заголовков делается и обычная строка. Только открывающий и закрывающий тег здесь <td> и </td> соответственно. В остальном всё так же. Заносим значения в каждую ячейку строки и закрываем её тегом.
<tr style="vertical-align:0;">
<td style="border:1px solid black;padding:3px;">СТРОКА 2 СТОЛБЕЦ 1</td>
<td style="border:1px solid black;padding:3px;">СТРОКА 2 СТОЛБЕЦ 2</td>
<td style="border:1px solid black;padding:3px;" width="40%">СТРОКА 2 СТОЛБЕЦ 3</td>
</tr>
Во второй строке я покажу небольшой нюанс. Часто нужно задать руками размер столбца. Вот на примере выше третий отличается размерами, а в этой таблице первый больше второго. Оптимальнее всего это сделать добавив в нужную строку значение width="40 так, как показано у меня. И подкорректировать проценты в нужную сторону.
</tbody></table> Закрываем таблицу. Готово.
Форматирование текста внутри таблицы можно сделать и с помощью визуального редактора.


И вторая таблица с фото. Для примера.

<table style="border-collapse:collapse;"><tbody> Открываем код таблицы.
<tr style="vertical-align:0;">
<td style="border:0px solid black;padding:3px;"><img height="100.5" src="http://img-fotki.yandex.ru/get/6730/92233928.1d/0_c7a41_5fff46f8_XXL.jpg" width="150" /></td>
<td style="border:0px solid black;padding:3px;"><img height="100.5" src="http://img-fotki.yandex.ru/get/9324/92233928.c/0_a5e43_b59df5de_XXL.jpg" width="150" /></td>
</tr>
По сути легче создать таблицу из предыдущего примера и через визуальный редактор забросить туда фотографию, подкорректировав её размеры.

Ставим только border:0px, чтобы не было видно границ.
<tr style="vertical-align:0;">
<td style="border:0px solid black;padding:3px;"><img height="100.5" src="http://img-fotki.yandex.ru/get/9810/92233928.28/0_dc525_256fe3bb_XXL.jpg" width="150" /></td>
<td style="border:0px solid black;padding:3px;"><img height="100.5" src="http://img-fotki.yandex.ru/get/9321/92233928.10/0_af62f_6d0091c3_XXL.jpg" width="150" /></td>
</tr>
Кстати, можно обойтись и простейшими тегами, без параметров. Но, как я уже сказал, ЖЖ в разных стилях обрабатывает таблицы по разному, так что лучше не рисковать и сразу прописать всё.
</tbody></table> Закрываем таблицу.


Не забываем, что все коды вставляются в редактор HTML, а не визуальный.

Остальные посты про ЖЖ:

Статистика блога в Google Analytics.
Статистика блога в Яндекс.Метрика.
Виджет Instagram в ЖЖ
Удобные комментарии в ЖЖ

Спасибо за внимание. На вопросы отвечу.

Tags: ЖЖ
Subscribe

  • Как удалить вокал из песни с помощью ИИ

    Удаление вокала из готовой музыки раньше было очень тесной нишей, занимаемой исключительно музыкантами. Теперь за дело взялся искусственный…

  • 5 лучших платных VPN сервисов

    Бесплатные VPN сервисы — это, конечно, хорошо, но только для каких-то единичных случаев. Но для постоянной безопасной работы в интернете и доступа…

  • 5 лучших приложений для записи экрана Android

    Многие разработчики смартфонов на Android предлагают собственные сервисы для записи экрана, но часто они очень ограничены в функциях. Собрал 5…

promo levashove march 20, 2018 17:56 30
Buy for 50 tokens
Привет. Меня зовут Евгений Левашов, я живу в Калининграде и работаю техническим писателем и техническим копирайтером. Проще говоря, я пишу инструкции и статьи на ИТ-тематику. Инструкции, документации, статьи на Хабрахабр и т.д.. Это блог с некоторых пор является зеркалом моего сайта.…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 18 comments

  • Как удалить вокал из песни с помощью ИИ

    Удаление вокала из готовой музыки раньше было очень тесной нишей, занимаемой исключительно музыкантами. Теперь за дело взялся искусственный…

  • 5 лучших платных VPN сервисов

    Бесплатные VPN сервисы — это, конечно, хорошо, но только для каких-то единичных случаев. Но для постоянной безопасной работы в интернете и доступа…

  • 5 лучших приложений для записи экрана Android

    Многие разработчики смартфонов на Android предлагают собственные сервисы для записи экрана, но часто они очень ограничены в функциях. Собрал 5…