Создай свой сайт - Как сделать и вставить таблицы в WordPress. On-line генераторы |

Время чтения: 5 мин.

Я уже говорил, что сделать таблицы можно и с помощью on-line генераторов. В Интернете их достаточно много, для примера мы рассмотрим два – попроще и понавороченнее.

Начнем с более простого, расположен он по адресу: http://www.askthecssguy.com/kotatsu/index.html. Кликайте по ссылке и переходите на сайт:

Сайт англоязычный, но с переводчиком Google все ясно, хотя перевод и не вполне литературный. Если переводчик у Вас в браузере не установлен, то – установите. Как это сделать, читайте здесь — http://www.novichkoff.ru/ustanavlivaem-tulbar-google-i-knopku-wikipedia.html

Сейчас на генераторе схематично изображена таблица 2×2. Но вверху есть кнопки – «Добавить строки» и «Добавить колонку». Вы должны себе уже четко представлять какая таблица Вам нужна, например, 3 колонки и 5 рядов. Значит, кликаете 1 раз по «Добавить колонку» и 3 раза по «Добавить строки». При каждом нажатии Ваша таблица видоизменяется:

Потом жмете на «Генерация HTML». Чуть ниже откроется окно с HTML-кодом Вашей таблицы:

Прежде чем что-либо мы с этим кодом будем делать, давайте разберемся, что здесь изображено. Зачем? Во-первых, Вам надо будет ее заполнять и надо знать, что и куда писать. Во-вторых, вполне вероятно, что Вам придется видоизменять таблицу уже на сайте – что-то добавлять (ряды и столбцы), а что-то – убирать. В-третьих, надо усвоить структуру таблицы, где ее начало и конец. Ведь Вам придется ее вставлять на сайт, переносить в другое место на странице и т.д. Особенно это будет важно при работе со следующим on-line генератором.

Сначала надо эту таблицу скопировать в Word. Почему? Там удобнее смотреть и разбираться. Кликаем по полю таблицы, фон становится синим:

Если у Вас вдруг по какой-то причине фон не стал синим, то кликните по полю ПРАВОЙ кнопкой мыши и выберите «Выделить все» и он обязательно станет синим. Потом кликаете ПРАВОЙ мышью и выбираете «Копировать». (Я предпочитаю работать с мышью, любителям набирать все на клавиатуре путь такой: сначала набрать комбинацию Ctrl+C, все скопируется в буфер обмена, а когда надо будет вставить данные — Ctrl+V).

Потом открываете Word, кликаете по любому месту страницы ПРАВОЙ мышью и выбираете «Вставить». Полный курс HTML я здесь давать не буду (да и не смогу!), но самые важные позиции мы здесь отметим.

Любая таблица начинается в тэга <table> и заканчивается тэгом </table>. Как видите, открывающий и закрывающий тэг отличаются только косой чертой (обратным слэшем). Это важно, запомните, пожалуйста.

Уверен, что Вы уже догадались, что ряд обозначается парными тэгами <tr> и </tr>, а колонки — <td> и </td>. Текст пишется как раз между ними, посмотрите:

Вот как это будет выглядеть на сайте:

Высота рядов WordPress’ом определяется автоматически и зависит от заполненности граф. Кстати, в отличии от плагина WP-Table Reloaded здесь Вы можете заполнять таблицы непосредственно в редакторе (я заполнял в Word’e только для того, чтобы Вы поняли назначение тэгов):

Видите, внизу наша табличка и здесь в графах можно писать нужные данные. А выше расположены коды таблиц [table id=13/] и [table id=15/], тех самых таблиц, которые мы делали с помощью плагина WP-Table Reloaded. Писать непосредственно в графах несравненно удобнее.

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

— расположение таблицы на сайте,

— размеры таблицы по ширине,

— копирование таблицы.

Чтобы Вам было понятнее о чем я говорю, приведу скриншот страницы сайта с таблицей. Только я ее немного уменьшу в размерах и текст в ячейках сделаю коротеньким – для наглядности. Пусть размер ее будет 3×2, а текст – только цифры. Заполнять ее будем в визуальном редакторе. Обратите внимание, когда вставляется пустая таблица, выглядеть она будет вот так:

Увеличиваться в геометрических размерах она будет по мере ее заполнения:

А сайте она будет выглядеть вот так:

Ужасно, правда? Таблица оказалась прижатой к левому краю текстового поля (серый цвет по бокам это — сайдбары), да и сама она какая-то кургузенькая. Надо править!

Сначала поставим ее посередине столбца. Для этого нам потребуется небольшое добавление в код. Нам надо вставить вот эту запись — align=»center» – в код. Она означает выравнивание по центру. Самая первая строчка кода нашей таблицы должна приобрести такой вид:

<table align="center">

Посмотрим, что получилось на сайте:

Уже лучше, таблица встала по центру. Теперь ее расширить бы! Для этого нам потребуется еще одно добавление в код: width=»100%». Это означает, что ширина нашей таблички (width) будет равняться 100% от ширины текстовой части нашего шаблона. Код (первая строка) теперь будет выглядеть вот так:

<table align="center"  width="100%">

Посмотрим, что теперь получилось на сайте:

Явно стало лучше. Но вот если бы ее сделать чуть поуже и цифры были бы посередине! Для этого надо всего лишь в записи width=»100%» цифру 100 поменять на другую, например, 70%:

<table align="center"  width="70%">

И посмотреть, что получится. Не понравится 70% меняйте на 60% или 85%, словом, на любую.

Что касается цифр по центру, то поступаем самым простецким образом: в визуальном редакторе аккуратно выделяем цифру и нажимаем кнопку «По центру»:

Я поменяю цифры только в первом ряду. Посмотрим, что получилось:

Цифры встали по центру граф. Ширина таблички уменьшилась. Ну, а если Вам не нравится сама табличка – цвет фона, размеры и цвет рамки и т.д., то надо приступать к освоению другого on-line генератора. Но об этом – в следующей статье.

А пока рассмотрим вопрос, как именно надо вставлять код таблиц в визуальный редактор. Делается это так. Открываете Word на страничке с кодом, копируете его, открываете адмпанель своего сайта, заходите в режим редактирования нужной статьи. У вас откроется визуальный редактор:

Вам нужна вкладка HTML, именно там размещается код. Определяете место, куда будете вставлять таблицу, кликаете по этому месту мышью и с помощью правой кнопки мыши выбираете «Вставить». Таблица будет вставлена в это место. Чтобы убедиться, перейдите на вкладку «Визуальный редактор» и посмотрите. Там же (в «Визуальном редакторе») начинайте ее заполнять.

P.S. Предупреждая Ваш вопрос: почему когда мы переходим на сайт, не видны наши таблицы id=13 и id=15, сделанные с помощью плагина WP-Table Reloaded? Ведь код же их виден? Это потому, что я отключил плагин (дезактивировал). Если его снова подключить, то таблицы будут видны – в библиотеке сайта они остались.

Предыдущие статьи:

Следующие статьи:

http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory-2.html

…Сообщите об этой статье своим друзьям:

Благодарю Вас!

А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

Удачи!
Автор: Сергей Ваулин

Похожие записи по этой теме: