Как сделать и вставить таблицы в WordPress. On-line генераторы. Как вставить таблицу в вордпресс
Как вставить таблицу в WordPress
Изначально предполагалось, что блог – это некоторый журнал, просто повествование и описание. И никакие таблички там неуместны. Однако на ВордПрессе благодаря его гибкости все больше создаются более бизнесовые сайты, и поэтому часто нужны таблицы для всевозможных расписаний, отображения параметров или цен.
И возникает проблема – как эту таблицу туда пометить?
Хорошо, если вы владеете азами HTML и вам ничего не стоит написать таблицу тегами. Переключаетесь в редакторе блога на вкладку текстового редактора и расписываете <table><tr><br>… Или пишите табличку в любом редакторе HTML и затем просто переносите код.
Но это довольно долго, к тому же порой эти вещи просто незнакомы блогеру или как-то лениво писать таблицу кодами.
Что делать?
- Расширение визуального редактора WordPress. Можно расширить возможности визуального редактора плагином TinyMCE Advanced, не всегда удачное решение. Панель управления становится громоздкой, а окно редактирования может разлезться. К тому же, он весьма утяжеляет вашу админку.
- Применение специального плагина. Очень красивые таблицы можно сделать плагином WordPress Pricing Table У плагина очень много вариантов использования — на любой вкус. Одна и та же табличка может быть одновременно вставлена в разных постах Вашего блога, прекрасно контактирует с плагином продающих страниц WPPage. Эстетам такой плагин наверняка придется по душе.
- И, наконец, самый простой, бесплатный и быстрый способ. Просто скопировать табличку из Экселя.
Как вставить табличку в Вордпресс
Вы вносите все данные, которые хотелось бы видеть на блоге, в обычную таблицу Excel Microsoft . Затем столбцы и сроки с Вашими данными. Нажимаете Ctrl+C, переходите в визуальный редактор Вашего блога и вставляете таблицу Ctrl+V. Конечно, Можно пользоваться и командами «скопировать» — «вставить» правой кнопки мыши.
Таблица готова!
Если Вам не нравится ее размер и форматирование, то просто перейдите во вкладку текстового редактора и выполните следующие действия
| Убрать заданную ширину столбцов | Удалите везде параметр width=»число» |
| Задать ширину таблицы по всему посту (странице) | Добавьте в тег <table> параметр ширины вот так: <table width=»100%»> |
| Убрать рамку таблицы | Добавьте в тег <table> стиль без рамки вот так: <table style=»border:none»> |
Теперь Вы можете как угодно играться параметрами, чтоб сделать табличку на свой вкус.
Кстати, табличка, сделанная в Microsoft Word тоже хорошо вставляется. Но если вы ее много меняли и форматировали в Ворде, то рискуете получить слишком перегруженный различными параметрами код — чаще всего совершенно ненужными.
Успешного использования таблиц в ваших блогах!
Если Вам нужна помощь – закажите консультацию
marjari.com.ua
Как сделать и вставить таблицы в WordPress. On-line генераторы
Я уже говорил, что сделать таблицы можно и с помощью 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 раза по «Добавить строки». При каждом нажатии Ваша таблица видоизменяется:
Прежде чем что-либо мы с этим кодом будем делать, давайте разберемся, что здесь изображено. Зачем? Во-первых, Вам надо будет ее заполнять и надо знать, что и куда писать. Во-вторых, вполне вероятно, что Вам придется видоизменять таблицу уже на сайте – что-то добавлять (ряды и столбцы), а что-то – убирать. В-третьих, надо усвоить структуру таблицы, где ее начало и конец. Ведь Вам придется ее вставлять на сайт, переносить в другое место на странице и т.д. Особенно это будет важно при работе со следующим 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% от ширины текстовой части нашего шаблона. Код (первая строка) теперь будет выглядеть вот так:
Посмотрим, что теперь получилось на сайте:
Явно стало лучше. Но вот если бы ее сделать чуть поуже и цифры были бы посередине! Для этого надо всего лишь в записи цифру 100 поменять на другую, например, 70%:
<table align="center" >И посмотреть, что получится. Не понравится 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-nachalo-plagin-wp-table-reloaded.html
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-prodolzhaem-rabotat-s-plaginom-wp-table-reloaded.html
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-zakanchivaem-razbirat-plagin-wp-table-reloaded.html
Следующие статьи:
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory-2.html
Удачи!Автор: Сергей Ваулин
www.novichkoff.ru
Как сделать и вставить таблицы в WordPress. Продолжаем работать с плагином WP-Table Reloaded
Если у Вас нет готовых таблиц в Excel, то можно сделать ее самому с помощью плагина WP-Table Reloaded. Заходим на главную страницу плагина и нажимаем ссылку «Добавить новую таблицу»:
Откроется страница «Добавить новую таблицу»:
Надо заполнить графы. Имя таблицы я написал – «Вторая таблица», описание не стал добавлять. Это описание требуется для меня самого. Надо еще указать количество рядов и колонок. И в конце нажимаете «Добавить таблицу». Появляется новая страница, в которой придется разбираться с настройками таблицы:
Теперь нам надо двигать по разделам вниз. Первый раздел «Информация о таблице»:
Именно здесь меняется название таблицы и ее описание. Опускаем страницу ниже:
Сначала о назначении чекбоксов (квадратиках, они показаны стрелками). Они нам пригодятся при манипуляции данными (это не мой термин, а название следующего раздела). В прямоугольниках пишите названия строк, столбцов, данные таблицы.
Переходим к следующему разделу «Манипуляции данными». Там почти все понятно, но некоторые пояснения я дам.
Начнем с левого ряда. Выше всего расположены две кнопки: «Поместить ссылку» и «Поместить изображение». Возьмем первый ряд и поместим в левой ячейке изображение, а в правой – ссылку.
Сначала нажмем кнопку «Поместить изображение». Появится вот такое окно:
Кликаем по ячейке В1, она сразу увеличится в размере и еще у Вас откроется окно:
Это окно откроется на вкладке «Медиа библиотека». Если у Вас есть нужные изображения – используйте их. Если нет – откройте вкладку «С компьютера» и с помощью кнопки «Обзор» найдите нужную картинку. Далее делайте все, как при обычном размещении картинок.
Но в таблицу попадет не картинка, а ссылка на нее:
Чтобы увидеть саму картинку и как она разместилась в таблице, надо перейти на сайт. Но мы сначала разместим ссылку и внесем еще кое-какие изменения. А потом посмотрим, что получилось. Нажимаем кнопку «Поместить ссылку». Выскакивает окно:
Я написал адрес главной страницы моего блога. Нажимаем ОК. Появляется новое окно:
В окошке, где написано «текст ссылки» вы должны написать текст самой ссылки (анкор), это именно то, что будет видно читателям Вашего сайта. Я напишу: перейти на сайт novichkoff.ru. После того, как нажмете на ОК, откроется окно с полной ссылкой:
Теперь надо нажать ОК и кликнуть в нужной ячейке таблицы, у нас это – ячейка В1.
Теперь, прежде чем Вы приступите к другим изменениям в таблице, внесенные нами данные следует сохранить. Нажимать надо на кнопку «Обновить изменения». Если Вы нажмете на кнопку «Сохранить и вернуться», то Ваши изменения будут сохранены, но Вас перебросят к списку таблиц, тогда надо перейти к редактированию этой таблицы.
Несколько слов о том, чем отличаются кнопки «Поместить ряд» и «Добавить ряд». Обе они используются при добавлении новых рядов, но «Поместить ряд» означает, что новый ряд будет помещен ПЕРЕД рядом, который Вы отметили флажком в чекбоксе, т.е. новый ряд будет в середине таблицы. Если же Вы нажмете «Добавить ряд», то новый ряд появится в самом низу, после всех рядов. Это же относится и к столбцам.
И еще несколько слов об обьединении ячеек. Чтобы обьединить ячейки по горизонтали, надо, сначала надо нажать кнопку «Добавить colspan». Появится окно:
Нажимаем ОК. Теперь выбираем ячейки, которые мы хотим обьединить, например, А3 и В3. Значит, надо кликнуть по ячейке В3:
И еще попробуем обьединить по горизонтали ячейки А2 (с текстом) и В2 (без текста) и посмотрим на сайте, где разместился текст. И сразу же обьединим по вертикали («добавить rowspan»)ячейки В4 и В5, чтобы увидеть, как это все будет выглядеть.
Про другие настройки я рассказывать не буду. Во-первых, Вы сможете разобраться с ними сами. А во-вторых, сегодня 31 декабря, Новый Год на носу, а времени осталось мало.
Перейдем к следующему разделу «Настройки стиля таблицы». Здесь рекомендую отметить галочкой «Подсветка ряда». При наведении курсора на какой-то ряд, он будет выделяться цветом. Если Вы хотите изменить какие-либо цвета, идите на сайт автора, там сказано в FAQ, как это сделать. Но предупрежу – надо знать CSS.
И последний интересующий нас раздел:
Уберите все флажки, кроме одного, как у меня на скриншоте. Впрочем, будет еще лучше, если Вы их будете убирать по очереди, посмотрев сначала на сайте, на что они влияют. Не забывайте нажимать «Обновить изменения».
Раздел «Поля определенные пользователем», мы сегодня трогать не будем. Но если Вам нужно сохранить таблицу на компьютере, то нажмите «Экспортировать таблицу»:
Появится новая страница. Нажмите «Экспортировать таблицу»:
Вам будет предложено или посмотреть файл (по умолчанию в Excel, но только для чтения), или сохранить его на компьютере. Выбирайте. Впрочем, посмотреть его лучше на сайте, потому что сохранен он будет вот в таком виде:
Чтобы посмотреть, что мы сделали надо перейти (об этом подробно в предыдущей статье) в адмпанель, выбрать «Редактирование страниц», далее выбрать страницу для экспериментов, отметить визуальном редакторе место в тексте, где будет таблица, нажать кнопку «Вставить таблицу», выбрать Вашу таблицу, нажать «Поместить». Появится ссылка на таблицу:
Обновляете страницу и переходите на сайт:
Вот наша табличка. Обратите внимание на следующие моменты:
- первая графа значительно шире, чем другие. Это потому, что размеры картинки такие. Поэтому и первый столбец (А) шире, чем второй. Другими словами. Ваш WordPress сам понимает какие там размеры и подгоняет под них ширину и длину ячеек, соответственно, столбца и ряда.
- длинная ячейка, где написано «2 ряд» — это та самая, где мы обьединяли ячейки по горизонтали. Обратите внимание на то, что она более высокая, чем следующая (из-за имеющегося текста).
- 4 и 5 ячейки во втором столбце были обьединены.
- обратите внимание, где располагается текст в обьединенных ячейках.
На этом сегодня закончу. Получится, продолжу завтра.
Да. Чуть не забыл. Посмотрите, я навел курсор на третий ряд, видите, он выделился цветом (темно-серым)?
Альтернативные цвета рядов у нас не видны, но они есть: белый и светло-серый. Когда сделаете свою таблицу – увидите. Дерзайте!
А теперь о приятном:
ВСЕХ С НОВЫМ ГОДОМ!
Желаю Вам в 2011 году хорошего тИЦ и PR, а тем, кто еще не сделал свой первый сайт – доделать его до конца. А я в Новом году порадую (надеюсь, что порадую) новыми статьями, в том числе и о заработке для начинающих. Уже идет сбор статистики.
Предыдущие статьи:
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-nachalo-plagin-wp-table-reloaded.html
Следующие статьи:
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-zakanchivaem-razbirat-plagin-wp-table-reloaded.html
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory.html
- http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory-2.htm
До встреч в Новом Году!
Автор: Сергей Ваулин
www.novichkoff.ru
