Желаете научиться писать первоклассные статьи, которые будут приносить качественный трафик? Тогда скачайте мою БЕСПЛАТНУЮ книгу по ссылке справа.

Скачать книгу!
Главная страница » Настройка сайта » Таблицы на WordPress — Легко за несколько секунд

Таблицы на 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

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

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд (1 голос, в среднем: 5.00 из 5)
Loading...

Понравилась статья? Поделитесь с другими!

Хотите получать оповещения о новых статьях на свою электронную почту?
Тогда введите свой E-mail адрес в форму ниже и нажмите Enter:
Оставлено комментариев: 43
  1. Александр,

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

    2013-01-31 в 9:39 пп |
    Ответить
  2. Тимофей,

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

    2013-02-02 в 6:29 пп |
    Ответить
  3. alf2012,

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

    2013-02-02 в 7:21 пп |
    Ответить
  4. Андрей,

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

    2013-02-03 в 7:31 дп |
    Ответить
  5. Людмила Винокурова,

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

    2013-02-03 в 7:45 пп |
    Ответить
  6. Vitalik,

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

    2013-02-04 в 8:47 дп |
    Ответить
  7. Мишко,

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

    2013-02-04 в 2:02 пп |
    Ответить
    • admin,

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

      2013-02-04 в 2:33 пп |
      Ответить
  8. Алена Щербюк,

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

    2013-02-09 в 9:33 пп |
    Ответить
  9. Людмила,

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

    2013-03-16 в 11:07 дп |
    Ответить
    • admin,

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

      2013-03-16 в 11:19 дп |
      Ответить
  10. Антон,

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

    2013-03-27 в 4:09 дп |
    Ответить
    • admin,

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

      2013-03-27 в 4:22 дп |
      Ответить
  11. Антон,

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

    2013-03-27 в 1:44 пп |
    Ответить
  12. Alexandr,

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

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

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

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

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

    2013-04-13 в 7:15 дп |
    Ответить
  13. Вера,

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

    2013-04-15 в 1:58 пп |
    Ответить
  14. Евгений Крыжановский,

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

    2013-04-16 в 3:22 пп |
    Ответить
    • admin,

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

      2013-04-17 в 9:58 дп |
      Ответить
  15. Илья,

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

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

    2013-07-12 в 1:14 пп |
    Ответить
  16. Ирина,

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

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

    2013-07-13 в 6:29 пп |
    Ответить
  17. Ирина,

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

    {div align="center"}

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

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

    2013-07-13 в 6:36 пп |
    Ответить
  18. Рустем,

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

    2013-07-24 в 8:51 дп |
    Ответить
  19. Галина_У,

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

    2013-09-04 в 10:39 дп |
    Ответить
    • Константин Белан,

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

      2013-09-04 в 3:15 пп |
      Ответить
  20. Анна,

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

    2013-09-20 в 6:59 пп |
    Ответить
  21. Виталий,

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

    2013-10-31 в 1:21 пп |
    Ответить
  22. Олександр,

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

    2013-11-30 в 10:41 дп |
    Ответить
  23. Cтепан,

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

    2013-11-30 в 1:41 пп |
    Ответить
  24. jkeks,

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

    2013-12-19 в 2:38 пп |
    Ответить
  25. Владимир,

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

    2013-12-26 в 8:28 дп |
    Ответить
  26. Денис Скрипник,

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

    2014-01-10 в 10:08 пп |
    Ответить
  27. AnSummer,

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

    2014-11-14 в 1:49 дп |
    Ответить
  28. Salma,

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

    2014-12-05 в 10:45 дп |
    Ответить
    • Константин Белан,

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

      2014-12-05 в 1:45 пп |
      Ответить
  29. Вова,

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

    2015-01-03 в 2:40 дп |
    Ответить
  30. Михаил,

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

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

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

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

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

    2015-01-30 в 11:53 дп |
    Ответить
    • Михаил,

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

      2015-01-30 в 11:57 дп |
      Ответить
  31. Andrei,

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

    2015-05-27 в 1:28 пп |
    Ответить
  32. Гевара,

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

    Спасибо

    2015-06-09 в 3:42 дп |
    Ответить
  33. Normand,

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

    2015-07-13 в 5:30 пп |
    Ответить
  34. Николай,

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

    2015-07-24 в 10:46 дп |
    Ответить
  35. Андрейко,

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

    2015-09-30 в 7:15 пп |
    Ответить
  36. Александр,

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

    2016-01-20 в 9:36 пп |
    Ответить
Оставить свой комментарий:

Эффективный блоггинг и инфобизнес с Белан Константином

Станьте моим партнером

© 2012-2015 | При копировании материала активная ссылка на сайт-первоисточник обязательна!

▲ Наверх