Как сделать таблицы в ЖЖ
Пост на заказ, так как попросили объяснить, как, собственно, сделать таблицы в ЖЖ. По сути это простейший HTML, но очень многие в этом совершенно не разбираются и требуют подробных инструкций. Но когда я сам полез разбираться, то оказалось, что ЖЖ не очень хорошо обрабатывает самые простые коды. В частности, в разных стилях они могут выглядеть по разному. Немного покопавшись в HTML предлагаю вам более менее универсальный вариант кода.
Итак, вот примеры таблиц. В одной просто текст, в другой я поставил фотографии.
ЗАГОЛОВОК 1
ЗАГОЛОВОК 2
ЗАГОЛОВОК 3
СТРОКА 1 СТОЛБЕЦ 1
СТРОКА 1 СТОЛБЕЦ 2
СТРОКА 1 СТОЛБЕЦ 3
СТРОКА 2 СТОЛБЕЦ 1
СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3
По структуре они абсолютно одинаковы. Рассмотрим код первой с моими комментариями.
Открываем код таблицы.
Открываем строку. Сделаем в каждом столбце заголовки. Если они не нужны - удаляем эти строчки.
ЗАГОЛОВОК 1
ЗАГОЛОВОК 2
ЗАГОЛОВОК 3
Здесь это набор параметров отображения таблицы. Значение border определяет толщину линий, solid black - цвет линий, а padding - размер поля вокруг текста
Для каждого столбца делаем свой заголовок. Тегом закрываем строку.
СТРОКА 1 СТОЛБЕЦ 1
СТРОКА 1 СТОЛБЕЦ 2
СТРОКА 1 СТОЛБЕЦ 3
По аналогии с строкой заголовков делается и обычная строка. Только открывающий и закрывающий тег здесь и соответственно. В остальном всё так же. Заносим значения в каждую ячейку строки и закрываем её тегом.
>СТРОКА 2 СТОЛБЕЦ 1
СТРОКА 2 СТОЛБЕЦ 2
width="40%">СТРОКА 2 СТОЛБЕЦ 3
Во второй строке я покажу небольшой нюанс. Часто нужно задать руками размер столбца. Вот на примере выше третий отличается размерами, а в этой таблице первый больше второго. Оптимальнее всего это сделать добавив в нужную строку значение width="40 так, как показано у меня. И подкорректировать проценты в нужную сторону.
Закрываем таблицу. Готово.
Форматирование текста внутри таблицы можно сделать и с помощью визуального редактора.
И вторая таблица с фото. Для примера.
Открываем код таблицы.
По сути легче создать таблицу из предыдущего примера и через визуальный редактор забросить туда фотографию, подкорректировав её размеры.
Ставим только border:0px, чтобы не было видно границ.
Кстати, можно обойтись и простейшими тегами, без параметров. Но, как я уже сказал, ЖЖ в разных стилях обрабатывает таблицы по разному, так что лучше не рисковать и сразу прописать всё.
Закрываем таблицу.
Не забываем, что все коды вставляются в редактор HTML, а не визуальный.
Остальные посты про ЖЖ:
Статистика блога в Google Analytics.
Статистика блога в Яндекс.Метрика.
Виджет Instagram в ЖЖ
Удобные комментарии в ЖЖ
Спасибо за внимание. На вопросы отвечу.
Итак, вот примеры таблиц. В одной просто текст, в другой я поставил фотографии.
ЗАГОЛОВОК 1
ЗАГОЛОВОК 2
ЗАГОЛОВОК 3
СТРОКА 1 СТОЛБЕЦ 1
СТРОКА 1 СТОЛБЕЦ 2
СТРОКА 1 СТОЛБЕЦ 3
СТРОКА 2 СТОЛБЕЦ 1
СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3
По структуре они абсолютно одинаковы. Рассмотрим код первой с моими комментариями.
Открываем код таблицы.
Открываем строку. Сделаем в каждом столбце заголовки. Если они не нужны - удаляем эти строчки.
ЗАГОЛОВОК 1
ЗАГОЛОВОК 2
ЗАГОЛОВОК 3
Здесь это набор параметров отображения таблицы. Значение border определяет толщину линий, solid black - цвет линий, а padding - размер поля вокруг текста
Для каждого столбца делаем свой заголовок. Тегом закрываем строку.
СТРОКА 1 СТОЛБЕЦ 1
СТРОКА 1 СТОЛБЕЦ 2
СТРОКА 1 СТОЛБЕЦ 3
По аналогии с строкой заголовков делается и обычная строка. Только открывающий и закрывающий тег здесь и соответственно. В остальном всё так же. Заносим значения в каждую ячейку строки и закрываем её тегом.
>СТРОКА 2 СТОЛБЕЦ 1
СТРОКА 2 СТОЛБЕЦ 2
width="40%">СТРОКА 2 СТОЛБЕЦ 3
Во второй строке я покажу небольшой нюанс. Часто нужно задать руками размер столбца. Вот на примере выше третий отличается размерами, а в этой таблице первый больше второго. Оптимальнее всего это сделать добавив в нужную строку значение width="40 так, как показано у меня. И подкорректировать проценты в нужную сторону.
Закрываем таблицу. Готово.
Форматирование текста внутри таблицы можно сделать и с помощью визуального редактора.
И вторая таблица с фото. Для примера.
Открываем код таблицы.
По сути легче создать таблицу из предыдущего примера и через визуальный редактор забросить туда фотографию, подкорректировав её размеры.
Ставим только border:0px, чтобы не было видно границ.
Кстати, можно обойтись и простейшими тегами, без параметров. Но, как я уже сказал, ЖЖ в разных стилях обрабатывает таблицы по разному, так что лучше не рисковать и сразу прописать всё.
Закрываем таблицу.
Не забываем, что все коды вставляются в редактор HTML, а не визуальный.
Остальные посты про ЖЖ:
Статистика блога в Google Analytics.
Статистика блога в Яндекс.Метрика.
Виджет Instagram в ЖЖ
Удобные комментарии в ЖЖ
Спасибо за внимание. На вопросы отвечу.