Как сделать таблицы в ЖЖ. Версия вторая расширенная.

[levashove]

Почти год назад я написал пост "Как сделать таблицы в ЖЖ" и он по прежнему регулярно набирает просмотры пользователей ЖЖ. Однако по нему было много вопросов в личку. "Как объединить строку?" "Как выровнять текст?" И т.д.. Не так уж и сложно разобраться с этим самому, учебников по HTML в интернете навалом, но всегда проще спросить человека знающего. А ведь и я сам не мастер в этом, но отказывать друзьям в такой ерунде не люблю, так что быстро всё гуглил и присылал готовые решения. Однако всё это привело к тому, что я решил написать расширенный пост про таблицы.

Итак, смотрите какая таблица получилась:

Общая строка

Общий столбец

СТРОКА 1 СТОЛБЕЦ 1


СТРОКА 1 СТОЛБЕЦ 3

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

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

СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3

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



КОД:

Общая строка

Общий столбец

СТРОКА 1 СТОЛБЕЦ 1


СТРОКА 1 СТОЛБЕЦ 3

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

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

СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3

И РАЗБИРАЕМ КОД ПО СТРОЧКАМ:

Открываем код таблицы.

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

На каждую ячейку лучше всего прописывать свои параметры: "border:1px solid black;padding:3px;"

• border определяет толщину линий (0 - без границ);
• solid black - цвет линий;
• padding - размер поля вокруг текста

Общая строка
Первая строка будет объединённой. Она задаётся тэгом , а цифрой задаётся количество столбцов, на которые растягивается эта строка. Тэг style="text-align: center отвечает за расположение текста внутри строки.

Тегом закрываем строку.

Общий столбец

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

Теперь создадим первую строку.

СТРОКА 1 СТОЛБЕЦ 1
Первая ячейка первой строки самая обычная.



Вторая ячейка с фотографией. Лучше всего не прописывать вручную тэги, а создать обычную ячейку и добавить туда картинку через визуальный редактор.

СТРОКА 1 СТОЛБЕЦ 3
В третей ячейке текст выровнен по верху тэгом "vertical-align: top". Обращаю ваше внимание на это, потому что очень часто нужно сделать таблицу с фотографиями и текстом и без этого тэга у вас просто этого не получится .

Закрываем первую строку.

Открываем вторую строку.

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

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

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

СТРОКА 2 СТОЛБЕЦ 2
Просто ячейка ;=)

width="40%">СТРОКА 2 СТОЛБЕЦ 3
Часто нужно задать руками размер столбца (в случае с таблицей с фотографией и текстом, например). Делается это тэгом width="40%" так, как показано у меня. Значение корректируйте в нужную вам сторону.

Закрываем строку.


Закрываем таблицу. Готово.
Форматирование текста внутри таблицы можно сделать и с помощью визуального редактора.

Ещё вариант таблицы.

Общая строка

Общий столбец

СТРОКА 1 СТОЛБЕЦ 1


СТРОКА 1 СТОЛБЕЦ 3

Общая строка

Общий столбец

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

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

СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3

И код для неё:

КОД:

Общая строка

Общий столбец

СТРОКА 1 СТОЛБЕЦ 1


СТРОКА 1 СТОЛБЕЦ 3

Общая строка

Общий столбец

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

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

СТРОКА 2 СТОЛБЕЦ 2
СТРОКА 2 СТОЛБЕЦ 3

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

Спасибо за внимание и подписывайтесь на мой блог.