Получайте секретные материалы проекта на свой E-Mail:

Таблицы на WordPress — Легко за несколько секунд

Здравствуйте, дорогие читатели SeoKos.ru! Сегодня мы поговорим о том, как вставить таблицу в wordpress блог. Думаю, каждый блоггер связывался с такой проблемой, ведь одним кликом это не предусмотрено. Сейчас мы поговорим о двух способах вставки таблицы.Как сделать таблицу в WordPress блог

Ни для кого не секрет, что в данный момент я выполняю один заказ – создание блога (подробнее о нем я скажу в отчете за январь). Так вот при выкладывании материалов на блог, я столкнулся с проблемой, как вставить таблицу в wordpress. К сожалению, в стандартном окне редактирования записей нет волшебной кнопки «Таблицы».

Немного походив по Рунету я все же нашел способ – сделать с помощью специального плагина (об этом ниже Способ №2). Но мы же знаем, что плагины значительно нагружают блог и снижают скорость загрузки сайта. Поэтому я решил поискать еще что-либо и нашел очень легкий способ без всяких накруток. Нужно лишь выполнить пару команд и отредактировать с помощью html.

Для чего нужны таблицы?

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

  1. Вы ведете блог своей компании. На нем выкладываете статьи с картинками, текстом и прайс-листом. Прайс-лист – это документ, в котором написаны цена на товар, услуги и т.д. Так вот, принято прайс-лист делать в виде таблицы. Во-первых, это удобно, а во-вторых, очень красиво выглядит.
  2. Вы решили провести конкурс на блоге. По окончанию конкурса, результаты необходимо вписать в отдельную статью. Как Вы думаете, будет лучше сделать: вписывать просто текстом (друг за другом) или же сделать красивую таблицу и аккуратно вписать результаты? Однозначно, лучше сделать таблицу!

Думаю я Вас убедил, что использовании таблицы очень важно! А теперь приступим непосредственно к главному – как сделать таблицу в wordpress в блог.

Как сделать таблицу в WordPress: Способ №1

Первым делом мы разберем способ создания таблицы без плагина. Для этого необходимо сделать нужную Вам таблицу в программе Microsoft Word

Таблица WordPress

Далее нужно выделить (CTRL+A) и скопировать ее (CTRL+C)

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

После чего заходим в окно редактирования записи в WordPress и нажимаем на кнопку «Вставить из Word», вставляем туда содержимое буфер обмена (CTRL+V) и нажимаем «Вставить»

Таблицу на блог

После чего таблица вставляется, но очень корявая и некрасивая. Это необходимо исправить! Для этого заходим в редактирование записи через html, находим таблицу и делаем следующие:

1. Находим строчку <table width="***" (вместо звездочек какой-то число) border="1" cellspacing="0" cellpadding="0">

Вот эта строчка таблицы

2. И перед ней (строчкой) вставляем тег <p style="text-align: center;">

Вставляем тег для таблицы

3. Далее находим тег, который закрывает таблицу </table> и вставляем после него </p>

Вставить таблицу в WordPress

Теперь сохраняем запись и радуемся. Таблица в статье готова!

Как сделать таблицу в WordPress: Способ №2

Этот способ так же рабочий и эффективный! Отличается лишь тем, что необходима установка плагина MCE Table Buttons. А как нам уже известно плагины нагружают блог. Кстати, в скором времени собираюсь начать выпускать серию статей «Как ускорить блог: Избавляемся от  плагинов"

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

Вставить таблицу в WordPress с помощью плагина

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

Как сделать таблицу в WordPress с помощью плагина

  • Настраиваем поля:

Columns — Количество колонок

Rows — Количество строк

Cell Padding — Отступы от ячеек до содержимого

Cell Spacing — Расстояние между ячейками

Alignmen — Выравнивание таблицы

Border — Толщина

Width — Ширина

Height— Высота

Table Caption — Заголовок таблицы

Background Image — Фоновое изображение

Frame — Отображение рамки

Rules — Внутренняя сетка таблицы

Border Color — Цвет обводки

Background Color - Фон таблицы

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

На этом данная статья подходит к концу! Теперь мы знаем, как сделать таблицу в wordpress в блог и умеем это делать. Поздравляю! Да, кстати, чуть не забыл – посмотри на пример:

Пример1 Пример2 Пример3 Пример4 Пример5 Пример6
Пример1 Пример2 Пример3 Пример4 Пример5 Пример6

Если возникнут какие-то вопросы, пишите в комментариях – с удовольствием отвечу! До скорого!

P.S. Если Вам интересно почему и где я пропадал целую неделю, подписывайтесь на обновление! Завтра напишу отчет за месяц и свою историю исчезновения.

Также советую прочитать следующие статьи:

Вкладки, табы на WordPress

Обмен ссылками

Красивые формы подписки

С уважением, Томский школьник!



style="display:inline-block;width:630px;height:90px"
data-ad-client="ca-pub-0353732343318230"
data-ad-slot="3060350256">

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 49
  1. Хороший пост, спасибо Константин. Мне пока что не было необходимости пользоваться таблицами, но кто знает, может завтра и понадобится.

  2. Полезная статья, правда полезная.

  3. Ответить

    Предпочитаю писать код вручную — хотя и долго, но зато вся таблица под контролем. С плагином конечно проще, но если их по каждому пустяку ставить — на блог места не останется 🙂

  4. Ответить

    Интересно. И выглядит симпатично! Спасибо, как нибудь применю!

  5. Ответить

    Думаю, на первое время можно и плагином обойтись, а потом ,и с кодом можно разобраться

  6. Очень пригодится такая штука для новостного какого нибудь блога

  7. Хороший плагин, но пока я могу работать ручками, буду работать 🙂

    • Мишко , Если может — пожалуйста! Это даже лучше будет 🙂

  8. Ответить

    Когда-то нужна была таблица, но обошлась без нее. Теперь буду знать, где искать

  9. Добрый день, подскажите пожалуйста, Есть форма поиска товаров по другому сайту, заключенная в (для фона). Как этот код HTML вставить на страницу WordPress?? И куда затем размещать скрипты. Спасибо!

    • Людмила, Извините, но с этим вопросом лучше обратиться к фрилансерам!

  10. Ответить

    Здравствуйте! Подскажите, пожалуйста, возможно ли наименования столбцов развернуть вертикально? а то таблица не помещается по ширине...

    • Антон, Думаю что можно! Просто нужно настроить внешний вид таблицы через CSS

  11. Ответить

    Ах внешний вид через CSS... Спасибо, но мне это пока что слишком сложно. я вовсе не знаю Css.

  12. Хороший вариант.

    Но мне как-то ближе внутренний метод через редактор в любое место.

    Ну как говорится каждому своё.

    Для меня даже это было чуть чуть удивительно что так можно.

    Не пользовался, да и совсем забыл про этот метод.

  13. Добрый день! У меня нет такой строки, данной Вами в п.1, таблица получилась корявая и перекошенная.

  14. Ответить

    я так понял нужно было просто отцентрировать таблицу кодом и все?

    • Евгений Крыжановский, Не только...

  15. Первый способ заинтересовал, когда понадобиться вставка таблицы в статью, обязательно им воспользуюсь, тем более никаких плагинов устанавливать не нужно. Ещё бы понять как красиво код в статью вставлять...

    P.S. Видео жесть! Нужно было ещё подписать — слабонервным не смотреть!

  16. Ответить

    Я сначала пишу статьи в Microsoft Word и сразу устанавливаю там же таблицу, заполняю её, то есть делаю законченную статью. Затем выделяю всю статью вместе с таблицей, иду в редактор, и жму левой кнопкой мыши — «вставить». Таблица получается немного корявая, это правда. Я просто захожу в HTML, и ставлю везде одинаковое значение ширины и высоты ячеек, а так же центрирую её, и всё, таблица получается ровненькая. А в начало кода таблицы и в конец ничего не добавляла, то есть не ставила, просто

    и так далее. И проблем пока не было. 🙂

  17. Ответить

    Забыла, что в комментариях кусочки кода не отображаются, я хотела показать, что просто окружаю таблицу тегом div

    {div align="center"}

    {table border="2" cellspacing="0" cellpadding="0"}

    Так наверное видно будет. 😛

  18. Спасибо большое за статью, и за столь замечательный плагин! 🙂

  19. Ответить

    Спасибо за статью, но на выходе таблица все равно корявая, так как большая по длине и ширине. Сейчас думаю: то ли исправить ширину в каждом столбце, то ли просто обрезать часть данных? 😕

    • Это у Вас скорее всего проблема в файле style.css (может немного отличаться название). Найдите класс .table и посмотрите какое значение стоит в свойстве width (ширина)!

  20. У меня не задан border, но все равно границы отображаются. Что сделать, чтобы их убрать??

  21. Мне пока что не приходилось в своей работе использовать таблицы в вордресс но информацию намотал на ус 🙂 теперь если что буду знать где найти подробную статью на данную тему.

  22. Дуже потрібна інформація. Я тобою захоплююсь звідки можна стільки знати.

  23. Ответить

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

  24. Ответить

    Спасибо. Я уже думал искать плагины, но потом все в Excel и сделал и все стало чудесно.

  25. Хорошая статья , спасибо Константин.Как всегда всё очень подробно изложил. 😡 😐

  26. Ответить

    В MaxSite CMS та же проблема — буду использовать первый вариант.

  27. Ответить

    А мне вот прямо сейчас понадобилась таблица в статье. Так что спасибо. Хотела обойтись без плагина, но у меня почему-то в редакторе WP нет кнопки вставить из Word. Может шаблон не поддерживает? Бывает такое? Придется кажется ставить плагин. А если его деактивировать после того, как таблицу сделаешь она пропадет из статьи?

  28. Статья полезна. Но уважаемый автор, у меня такая проблема: как сделать чтоб таблица была прозрачной? Ну, как в ворде таблицы невидно, а текст есть. Спасибо

    • Добрый день. Нужно в файле style.css найти table и изменить параметр border по своему вкусу. Если хотите полностью отключить границы, то поставьте значение 0.

  29. А кто знает как в вордпрес в визуальном редакторе вставить фоновую картинку на таблицу, строку или ячейку в таблице? А еще расширение для встваки в код блока если кто знает подскажите. может нужно плагины какие добавлять? Просто с вордпрес не работал давно, а ща столкнулся, вот в других движках в редакторе это предусмотрено. а здесь что то не могу найти. Можно конечно и в ручную прописать но это не совсем удобно каждый раз искать пути для картинок. тем более они там все скопом почемуто грузятся и возможности разложить по своим папкам кстати тоже не нашол...

  30. День добрый помогите пожалуйста! Где исправлять этот код из первого варианта? У меня движок вордпресс и в разделе добавить запись видно визуальный редактор и просто текст- там где текст исправлять? Кстати код там получился такой

    Уральский рекс

    Бурманская кошка

    Ориентальная длинношерстная кошка

    а последняя строчка стерается всегда когда я переключаюсь между визуальным редактором и текст

    • Блин код стерся не покажу, вообщем как можно сделать что бы картинки\фото оставались в таблице???

  31. как сделать такую красивую нумерацию как у вас «Рекомендую к прочтению» ?

  32. Доброго времени суток, Константин. Случайно не знаете, как отключить адаптивный дизайн в вордпресс?(тема Jolene).Хотя бы примерно? Нужно чтоб сайт отображался одинаково на всех платформах: пк, смартфонах, планшетах. Уже месяц не могу найти ответ на этот вопрос...

    Спасибо

  33. Ответить

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

  34. Ответить

    Смотри-ка получилось с первого раза с этим плагином. Вот только сетка не отображается. Там есть такая функция? Поставил отображение рамки, но и её нет...

  35. Ответить

    Хорошая статья, отличный способ вставить таблицу без плагина

  36. Ответить

    Пробовал разные варианты вставки таблицы, ничего не получалось. Здесь наконец то просто и ясно. Автору спасибо за полезную информацию.

  37. Ответить

    Привет. Установил MCE Table Buttons. Блоки таблиц не видны ни на одном редакторе. Как будто и не устанавливал MCE Table Buttons.

  38. Ответить

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

  39. Ответить

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

  40. Сервис почтовых рассылок Smartresponder.ru после предварительного многократного уведомления всех Пользователей Сервиса, начиная с 13 сентября 2016 года и по 31 октября 2016 года, официально прекращает свою деятельность

  41. Ответить

    Круто, спасибо за инфу. Не знал, что с Microsoft Word можно вставлять таблицы 🙂

  42. Ответить

    Спасибо ЗАО первый способ без плагина, все очень просто сделать.