Добрый день, уважаемые читатели wmbn.ru! Работая с другими блогами, которые приходилось создавать для работников, которые даже не ведали понятия о том, что такое WordPress, блог и прочие термины, от меня просили одного — добавить на их сайт таблицу. С таблицами до этого я работал только в html, т.е. в редакторах WYSIWIG, в которых можно было без проблем создать таблицу и заполнить ее, не используя при этом html теги. Ну и конечно те же таблицы в Word, OpenOffice и LibreOffice, которые постоянно приходилось создавать, печатая тот или иной отчет. Когда же дело коснулось блога и что от меня требовали — добавить таблицу в WordPress, то тут данный вопрос слегка озадачил, т.к. до этого работы с табличными данными в WordPress у меня еще не было.

Как вставить таблицу в WordPress

Долго не разбираясь я просто создал таблицу в html и заполнил ее данными из документа. Способ конечно глуповатый, но при форс мажорной ситуации надо было что-то придумать, иначе другого пути не было. Вскоре при более тщательной разборке проблемы нашлось несколько способов как создать или загрузить таблицу в WordPress, что вскоре очень облегчило сам процесс создания и производительность — дневной заказ можно было сделать буквально за час, если не меньше, что очень радовало меня, так как больше времени остается на ведение своего блога.

Создание и работа с таблицами — HTML теги и CSS

Как я уже упомянул, то сначала создавал таблицы с помощью HTML тегов, изменяя их атрибуты. Плюсы данного способа в том, что можно самому настроить вид таблицы, зафиксировать столбцы, задав для них статические значения, различные выравнивания и прочие хитрости. Однако, такой способ не лишен недостатков, касается это в первую очередь трудоемкости — не каждому захочется создавать таблицы с помощью html тегов и потом еще ее и настраивать.

Таблицы на сайте создаются с помощью html тега table, который дает начало всей таблице и в конце закрывается. Любая таблица состоит из строк и столбцов, которые в html задаются с помощью специальных тегов th, td и tr. Но понятие столбец в html создается из строк, которые создаются с помощью тега tr, разделяемые на ячейки тегом td и tr (для заголовков). Пример простой таблицы с использованием данных тегов:

<table>
<tr><th>Заголовок таблицы th</th><th>Заголовок таблицы th</th>
</tr>
<tr><td>Ячейка таблицы td</td><td>Ячейка таблицы td</td>
</table>
Заголовок таблицы th Заголовок таблицы th
Ячейка таблицы td Ячейка таблицы td

С помощью данного кода создается простая двух столбчатая таблица без рамки и прочих свойств. Чтобы были видны границы таблицы, нужно внутри тега table указать некоторые параметры, в частности толщину рамки и цвет (если не указать, то цвет границы будет черным).

Пример границы с использованием тегов border и bordercolor для создания рамки вокруг таблицы и задания для него цвета:

<table border="2" bordercolor="red">
<tr><th>Заголовок</th><th>Заголовок</th>
</tr>
<tr><td>Ячейка</td><td>Ячейка</td>
</table>
Заголовок Заголовок
Ячейка Ячейка

Иногда бывает так, что нужно задать для таблицы выравнивание, особенно если она имеет большие размеры. Выравнивание таблицы делается с помощью вставки внутрь тега table align, который имеет свои значения — left, right, center и justify:

<table align="center" border="2">
<tr><th>Заголовок</th><th>Заголовок</th>
</tr>
<tr><td>Ячейка</td><td>Ячейка</td>
</table>
Заголовок Заголовок
Ячейка Ячейка

Это были основные теги для создания таблицы, которые я использовал, однако есть и другие, которые могут понадобиться в некоторых случаях, как например фон таблицы, который задается свойством bgcolor. Применяется он в тех случаях, когда нужно выделить таблицу от основного содержания документа или таблиц. Установка фиксированной длины (height) и ширины (width), или же зависимой от основного документа, а также отступов между ячейками (cellspacing) и рамкой с текстом (cellpadding). Все эти примеры можно привести в одной таблице:

<table bgcolor="green" height="100" width="300" cellspacing="2" cellpadding="2">
<tr><th>Заголовок</th><th>Заголовок</th>
</tr>
<tr><td>Ячейка</td><td>Ячейка</td>
</table>
Заголовок Заголовок
Ячейка Ячейка

Что касается Css, то в нем мы можем прописать только стили для каждого тега, т.е. tr, th, td и table в целом. Однако в большинстве случаев любой шаблон, созданный для WordPress или просто HTML, уже имеет созданные стили для таблицы в файле style.css. Во пример участка кода Css, в котором уже указаны все основные стили для таблицы:

table {
align: left;
bgcolor: white;
}
th {
background: #eee;/
text-align: justify;
}
td, th {
border: 2px solid #700;/
padding: 2px;
}

Как видно, в первой строке указаны параметры для всей таблицы, а ниже для ячеек. Используя padding, можно лишний раз не указывать свойства для каждой ячейки в таблице.

HTML теги td, tr и th для придания определенного стиля ячейкам и строкам редактируемой таблицы

Помимо задания свойств для всей таблицы, можно ограничиться отдельными ячейками и строками в таблице. К примеру начну с tr, которая создает строки в таблице. Для нее можно задать те же параметры align, bgcolor, borfercolor, height и width:

<table border="2">
<tr align="center" bgcolor="green"><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th>
</tr>
<tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td>
</table>
Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка

Что касается тегов th и td, то с помощью свойств, которые присуще им, можно объединять ячейки как по горизонтали (rowspan), так и по вертикали (colspan). В тоже время они поддерживают задание своего цвета для отдельной ячейки, рамки, выравнивания и т.д.:

<table border="2">
<tr>
<th>Заголовок</th>
<th colspan="3">Заголовок</th>
<th colspan="3">Заголовок</th>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</table>
Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка Ячейка Ячейка

Вставка таблицы из MS Word и создание в CKEditor

Как я уже говорил, то основная задача была вставка таблицы из Word документа в WordPress с сохранением все данных. Что было интересным в моей ситуации — я почему-то в упор вначале не замечал кнопки вставки таблицы или документа из Word, пока не раскрыл дополнительную панель, в которой как раз и нашел ту самую кнопку. Чтобы вставить таблицу, достаточно лишь нажать на нее и скопировать в появившееся окно таблицу из документа:

Заголовок Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

И получится результат, который вы наблюдаете. Единственное, что мне не понравилось при создании таблицы таким способом — генерируемый код был слегка нагружен тегами:

<table width="100%" border="1" cellspacing="0" cellpadding="4"><colgroup>
<col width="64*" /> <col width="64*" /> <col width="64*" /> <col width="64*" />
</colgroup>
<tbody>
<tr valign="TOP">
<td width="25%">Заголовок</td>
<td width="25%">Заголовок</td>

А если бы таблица еще и использовала различные выравнивания, то код был бы еще страшнее, но тогда это значение не имело. Так же некоторые таблицы, которые приходилось вставлять, не всегда отображались, но это касалось только продуктов Microsoft, а с Open Office было все в порядке.

Так же можно создать таблицу с помощью WYSIWYG редактора CKEditor. Что в нем удобно, то можно вставить таблицу, задав для нее как стандартные параметры — количество строк и столбцов, ширину и высоту, заголовки, размеры границ, отступов от границ и ячеек, выравнивание, так и придать для таблицы созданный стиль в Css. В TinyMCE такого по умолчанию не было, хотя могли бы уже давно вставить такую функцию. Вид таблицы получается стандартный, собственно более и не надо. Html код сгенерированной таблицы не нагружен тегами и в большей степени зависит от выставленных настроек.

Вставка таблицы в CKEditor

Редактировать и дополнять данные можно прямо в созданной таблице, не изменяя при этом html теги. Структуру таблицы тоже можно менять, не используя при этом html теги — достаточно правой кнопкой мыши нажать на таблицу и из контекстного меню выбрать необходимые действия (добавить, удалить или объединить ячейки, столбцы и строки) или же изменить свойства таблицы, которые были заданы в начале. Преимущество такого способа — нет необходимости редактировать таблицу с помощью html тегов или Css, все делается как в том же Word или Writer с помощью мышки. Таким же способом можно и выучить html теги таблицы, изменяя различные параметры в редакторе.

Создание простой и сложной структурированной таблицы с помощью плагина WP-Table Reloaded

А теперь приступим к самой интересной части записи — создание таблицы с помощью плагина WP-Table Reloaded. А интересна она тем, что плагин может создавать не только простые таблицы с данными, но и структурированные таблицы, в которых можно вести сортировку записей, поиск, выборку и т.д. — это очень удобно, когда таблица имеет большой вид, что свойственно различным отчетам.

Плагин WP-Table Reloaded можно скачать с сайта WordPress, а затем распаковать архив в папку с плагинами на сервере. Или же в поисковой строке — на панели администратора в меню Плагины — Добавить новый, ввести название плагина и на странице результатов выбрать тот, который искали. Осталось лишь установить его и активировать.

После установки в меню Инструменты появится страница плагина, на которую нужно перейти, чтобы начать работать с таблицами в WordPress. Плагин попался русифицированный, поэтому проблем с работой возникнуть не должно. Всего на странице WP-Table Reloaded 6 ссылок меню, с помощью них можно создать таблицу, или импортировать готовую, а так же наоборот, созданную таблицу сохранить в файл. Плагин имеет свои настройки, которые нужно изменить под себя.

Переходим на страницу настроек, где в первую очередь меняется внешний вид созданной таблицы и ее функционал. Если функционал, то в него входит сортировка записей, отображение частей таблицы по страницам и фильтр записей — все это можно отключить, убрав галочку с пункта Включить использование Java-Script библиотек. Внешний вид изменяется с помощью Css, по этому если у вас есть готовый стиль для таблиц, то можно его прописать в Пользовательском CSS.

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

Остались две последние и очень полезные функции плагина — импорт и экспорт данных с таблицами. Т.е. можно создать резервную копию всех ваших таблиц, и в случае если плагин выйдет из строя, то можно хотя бы не потерять данные и после переустановки восстановить все таблицы.

Давайте на примере создадим самую простую двух колоночную таблицу — для этого выбираем пункт меню Добавить новую страницу. Далее указываем Имя таблицы, Описание, количество Рядов и Колонок и жмем Добавить таблицу. На следующей странице можно изменить введенные данные или же начать заполнять созданную таблицу, где столбцы помечены буквами, а строки цифрами для удобства.

Редактирование таблицы в WP-Table Reloaded

В блоке Манипуляции с данными в ячейки можно помещать ссылки, загружать изображения, выбрать ряды и удалить их, или же скрыть или поменять местами. Так же есть функция сортировки записей по столбцам, указав его соответственно и тип сортировки (по возрастанию, по убыванию). Что еще удобно, можно объединять столбцы и ячейки таблицы, добавлять и передвигать их.

Панель редактора WordPress

После этого настраиваем внешний вид таблицы, указав для нее различные свойства, а также настроить функционал таблицы. Затем сохраняем таблицу и в записи находим кнопку на панели редактора, которая позволит добавить созданные таблицы в текст поста. Так же можно импортировать уже готовую таблицу из файла, с расширением CSV, XML и HTML.

Таблица, созданная с помощью плагина

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

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

На этом можно запись можно закончить, выводы напрашиваются сами — если вам необходимо просто выставить таблицу на страницу, то используйте средства CKEditor, установив его на блог, или же вставьте таблицу из Word. Если необходимо иметь сложную структурированную таблицу, где нужно сортировать записи при их огромном количестве, вести поиск и прочие дополнения, то плагин WP-Table Reloaded подойдет. Ну а если же нужно просто предоставить таблицу, при этом не важно — надо ли ее отображать на странице или нет, то простая загрузка с помощью средств редактора будет в самый раз.

Комментариев: 14

  1. Orcinus Orca

    От формата:

    необходимо избавляться ибо он не верен с точки зрения HTML 5. Сейчас все свойства требуют указывать в CSS иначе подобная таблица завернёт валидацию документа.

  2. West Blogger

    Мне никогда еще не приходилось использовать таблицы в блогах. Хотя, не, помню на одном сайте пытался вставить из ворда, так там кода целая простыня оказалась :)

      1. writer

        там не только таблицы были…весь текст, разметка которого раза в три если не больше была… Но зато интересно было посмотреть что ворд даст в WordPress

  3. Виталий

    Бывает, что без таблицы просто не обойтись. Если делать таблицу только в HTML, то простыня действительно не маленькая получается ))) С помощью CSS по компактней будет.

  4. Orcinus Orca

    В принципе, если не выёживаться с красивыми тонкими ячейками, то можно только тэгами table tr td сваять нормальную компактную таблицу. А если вытаскивать из ворда, то Ворд такого наворотит с ячейками, что хоть вешайся.

    1. writer

      Да, код там отвратный получается. Часто просили с какими нибудь плюшками делать таблицу, поэтому приходилось использовать весь потенциал HTML

  5. Раис

    Подскажите пожалуйста как можно вставлять в WP для скачивания как отдельные документы ворд и эксель?
    Благодарю!

    1. writer

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

  6. Сергей

    Очень благодарствую за эту статью, был не опытен в этом деле, так как начинающий. Теперь все сразу облегчило ситуацию!

  7. Елена

    Спасибо за статью. Таблицу вставляла из Worda, расположение на странице получилось правильное, но на сайте не видно границ таблицы. В редакторе видно, а на сайте нет. Пыталась уже и цвет поменять, но безрезультатно. Что делать подскажите?
    С плагинами работать не пробовала. Может еще есть какой-нибудь способ вставки таблиц из Worda?

  8. Александр

    Очень интересная статья.
    Порадовало что был рассмотрен метод
    <!—

    —>
    Мало кто рассказывает об этом методе.
    Все обычно экономят силы и предлагают лишь один метод через вставку таблиц из Word.

    Спасибо за старание автору.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>