Хостинг 24/7

Таблицы WordPress – как вставить таблицу в запись или на страницу

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

tablicy-wordpress01

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

html-заготовки простейших таблиц

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

1 колонка, 1 строка

 Ячейка

 

1
2
3
4
5
6
7
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td> Ячейка</td>
</tr>
</tbody>
</table>

 


 

3 колонки, 1 строка

 Ячейка 1  Ячейка 2  Ячейка 3

 

1
2
3
4
5
6
7
8
9
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td> Ячейка 1</td>
<td> Ячейка 2</td>
<td> Ячейка 3</td>
</tr>
</tbody>
</table>

 


2 колонки, 2 строки

 Ячейка 1  Ячейка 2
 Ячейка 3  Ячейка 4

 

1
2
3
4
5
6
7
8
9
10
11
12
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td> Ячейка 1</td>
<td> Ячейка 2</td>
</tr>
<tr>
<td> Ячейка 3</td>
<td> Ячейка 4</td>
</tr>
</tbody>
</table>

 


3 колонки + объединение ячеек

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7
Ячейка 8 Ячейка 9 Ячейка 10 Ячейка 11 Ячейка 12

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td colspan="2">Ячейка 2</td>
<td colspan="2">Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
</tr>
<tr>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
<td>Ячейка 10</td>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
</tr>
</tbody>
</table>

 


Вариант с прозрачными границами

 Ячейка 1  Ячейка 2
 Ячейка 3  Ячейка 4

 

1
2
3
4
5
6
7
8
9
10
11
12
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td style="border: 0px;"> Ячейка 1</td>
<td style="border: 0px;"> Ячейка 2</td>
</tr>
<tr>
<td style="border: 0px;"> Ячейка 3</td>
<td style="border: 0px;"> Ячейка 4</td>
</tr>
</tbody>
</table>

 


Таблицы WordPress с помощью плагина TinyMCE Advanced

Еще более простым и удобным способом вставки таблиц на страницы Вордпресс является использование плагина TinyMCE Advanced – расширенного визуального редактора. То, что не умеет делать стандартная панель, с легкостью делает этот плагин. Плагин заслуживает отдельного обзора, так как его функционал не ограничивается вставкой таблиц, но в рамках этой статьи ограничусь краткой инструкцией.

После установки плагина в меню параметры WordPress появится новый пункт: TinyMCE Advanced, где мы сможем с помощью Drag-and-drop интерфейса менять содержимое панели визуального редактора. По умолчанию панель не содержит блок с редактором таблиц:

tablicy-wordpress

 

Перетаскиваем блок с таблицами в верхнюю панель:

tablicy-wordpress-02

 

И сохраняем изменения:

tablicy-wordpress-03

 

Теперь в редакторе появился блок добавления и редактирования таблиц как в любом текстовом редакторе Windows. С помощью этой панели вставлять таблицы на страницы или записи WordPress и красиво оформлять  их можно в несколько кликов.

tablicy-wordpress-04

tablicy-wordpress-05

13 комментариев: Таблицы WordPress – как вставить таблицу в запись или на страницу

  • Сергей говорит:

    Спасибо за полезный пост. После обновления WordPress в редакторе исчезла кнопка “Вставить из Word”. Вместо неё появилась “Вставить, как текст”. И теперь вместо таблицы появляется что-то белое и пунктирное, да ещё без текста. Непонятно, зачем разработчики убрали эту полезную функцию. Ещё раз спасибо за статью! Оставлю в закладках.

    • Duvol
      Duvol говорит:

      Добрый день. Рад, что пригодилось.

  • Андрей говорит:

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

  • Юрий говорит:

    У меня в таблице не видно border, хотя в Dreamweaver CS3 он есть, а в WordPress нет. Знаете почему такое может быть?

  • Алина говорит:

    Большое спасибо за пост!
    Задалась вопросом улучшения визуальной организации текста в WP с помощью таблиц, и Ваш материал очень подошел – просто и понятно написано, плюс два решения (код и плагин) – очень удобно.

  • Александр говорит:

    выводит таблицу без четких границ. подскажите. устал уже.

    • Duvol
      Duvol говорит:
      1
      <td style="border: 1px solid black;">Содержимое</td>
  • Vadzik говорит:

    Спасибо за статью, хорошая наглядность, за пару минут разобрался и применил в статье.

  • Дима говорит:

    спасибо

    а как сделать прозрачный фон таблицы?

  • Дмитрий Васильевич говорит:

    Спасибо!

    Материал для “чайников” (коим являюсь) – очень нужная вещь.

  • Дмитрий Васильевич говорит:

    А как сделать центрирование текста в ячейке по вертикали?
    т.е. чтобы текст был в центре ячейки как по горизонтали, так и по вертикали.

  • Давид говорит:

    Спасибо огромное за статью долго искал как реализовать таблицу в вордпрессе, ничего интересного не нашел, а ваша статья оказалась очень полезной. Побегу трудиться над сайтом. Спасибо.