Как вставить таблицу в Вордпресс

Приветствую всех читателей этого блога!

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

Описанный в статье способ реализуется без использования плагина стандартными средствами WordPress и отлично подойдет для добавления на сайт небольшой простой таблички.

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

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

Давайте без лишних слов перейдем к рассмотрению вопроса как сделать таблицу в Вордпресс.

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

Для начала нужно эту самую таблицу создать вне Вордпресс.

Ни для кого не секрет, что удобнее всего работать с таблицами в Microsoft Excel. Именно так я и поступлю в данном примере.

Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

Если вам удобнее, то можете создать таблицу в Microsoft Word, суть это не изменит.

Когда таблица готова, выделяем ее и копируем в буфер обмена (Ctrl-C):

Как вставить таблицу в Вордпресс и сделать ее адаптивной

Для добавления таблицы в WordPress переходим в режим визуального редактора:

Как вставить таблицу в Вордпресс и сделать ее адаптивной

И вставляем скопированную таблицу (Ctrl-V):

Как вставить таблицу в Вордпресс и сделать ее адаптивной

Таблица добавлена! На странице сайта она выглядит следующим образом:

Как вставить таблицу в Вордпресс и сделать ее адаптивной

Чтобы сделать текст в ячейках по центру, выделяем поочередно каждую ячейку таблицы и нажимаем кнопку «По центру»:

Как вставить таблицу в Вордпресс и сделать ее адаптивной

Теперь давайте сделаем ее адаптивной, т.е. изменяющейся в зависимости от размеров окна, в котором отображается страница сайта с этой таблицей.

Для этого копируем код CSS:

/*Адаптивная таблица*/
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
content: attr(data-th); 
display: block;
text-align:center;  
}
}

И вставляем его в самый конец файла style.css вашего шаблона WordPress и сохраняем изменения.

Теперь если ширина окна будет менее 600px таблица трансформируется следующим образом:

Как вставить таблицу в Вордпресс и сделать ее адаптивной

То есть строки выстроятся в столбцы и встанут друг под друга.

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

Разнообразьте контент своего сайта таблицами, ведь это совсем не сложно!

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

С уважением, Владимир Денисов!

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

Комментарии 5

  • И все ?
    Так просто 🙂 ?
    Все гениальное должно быть просто !

    Огромное спасибо !!!!!!!

  • Благодарю! Все получилось 🙂 с первого разу)

  • Спасибо за совет! Мне ваше решение с CSS, к сожалению, не подошло, т.к. на сайте есть большие таблицы со сложной структурой, их сильно перекосило 🙂 Лично я делаю так: copy\paste таблицу из Word или Excel, а дальше допиливаю (выравнивание и проч.) с помощью плагина MCE Table Buttons.
    Наверное, с точки зрения html кривоватый способ, но мне подходит.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.