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

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

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

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

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

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

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

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

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

Если вам удобнее, то можете создать таблицу в 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 для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

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

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

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

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

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

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

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

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