Сегодня будет небольшой, но очень полезный урок на тему того, как добавить таблицу в Вордпресс.
Описанный в статье способ реализуется без использования плагина стандартными средствами 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 таблица трансформируется следующим образом:
То есть строки выстроятся в столбцы и встанут друг под друга.
Таким образом сегодня мы разобрались как создать таблицу в Вордпрессе.
Разнообразьте контент своего сайта таблицами, ведь это совсем не сложно!
И все ?
Так просто 🙂 ?
Все гениальное должно быть просто !
Огромное спасибо !!!!!!!
Благодарю! Все получилось 🙂 с первого разу)
Пожалуйста! Рад, что все получилось!
Спасибо за совет! Мне ваше решение с CSS, к сожалению, не подошло, т.к. на сайте есть большие таблицы со сложной структурой, их сильно перекосило 🙂 Лично я делаю так: copy\paste таблицу из Word или Excel, а дальше допиливаю (выравнивание и проч.) с помощью плагина MCE Table Buttons.
Наверное, с точки зрения html кривоватый способ, но мне подходит.
Пожалуйста, Сергей! Главное, чтобы результат устраивал, а кривой способ или нет — это понятие относительное))