Несколько слов о работе с таблицами в WordPress

18.11.2012   Соколов В.       WordPress       67 комментариев »

В WordPress без проблем можно вставить любые тексты из M. Word, включая таблицы. Важным достоинством WordPress является то, что при копировании из Ворда удаляется ненужная для веб-страницы служебная информация. Но вот ширину таблицы он всё-таки сохраняет, что не всегда удобно: на сайте может быть другой размер шрифта или другая ширина колонки. И тогда красивая таблица станет не очень красивой или вылезет за отведенные для текста границы.

Чтобы работать с таблицей, желательно иметь некоторое представление о тегах html – это средство разметки текста веб-страницы, которое позволяет более-менее одинаково видеть сайт на компьютере с любой операционной системой: Windows, Linux, Mac.

Теги заключены в скобки, внутри которых имеется наименование тега:
<h2> – тег подзаголовка (заголовок второго уровня);
<table> – тег таблицы.

Как и кавычки, теги открываются и закрываются. Закрывающий тег имеет в начале слэш. Закрывающие теги подзаголовка и таблицы будут выглядеть так: </h2> </table>

Помимо наименования тега, внутрь него может быть добавлена различная информация. Это не должно вас смущать. Мы смотрим на начало тега, а что идет потом, мы научимся разбираться со временем.

Любая правильно построенная веб-страница должна иметь два раздела:

<head></head> – «голова» страницы, в ней содержится служебная информация;

<body></body> – «тело» веб-страницы, в этом разделе содержится всё, что мы увидим в окне браузера.

Таблица обозначается следующими тегами:
<table> – начало таблицы
<tr> – начало строки таблицы
<td> – начало ячейки
</td> – конец ячейки
</tr> – конец строки
</table> – конец таблицы.

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

Пока на этом остановимся, и перейдем к примерам. Выделите вместе с заголовком, скопируйте и вставьте в новую запись WordPress следующую таблицу:

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

Первая ячейка Вторая ячейка

Нажмите «Просмотр». Если таблица видна на странице, попробуем ее настроить. Для этого в окне редактирования записи мы нажимаем кнопку «Текст» (в прошлых версиях — «html»). Теперь мы видим код нашей таблицы:

<table border="1">

<tbody>

<tr>

<td width=«150» valign=«top»>Первая ячейка</td>

<td width=«150» valign=«top»>Вторая ячейка</td>

</tr>

</tbody>

</table>

Здесь добавился еще один тег — <tbody> (тело таблицы), он не играет особой роли.

Тег <table> содержит несколько параметров, которые можно настроить:

border="1" – это толщина линии. Если вам не нужно, чтобы все границы в таблице были очерчены, поставьте в кавычках значение border="0".

В большинстве тем граница таблицы прописана в стилевом файле, тогда граница убирается с помощью стилевого оформления:

<table style="border: 0;">

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

Если Вы давно не обновляли свой WordPress, могут быть еще атрибуты, которые в настоящее время считаются устаревшими:

cellspacing="0" – отступ между границами соседних ячеек, его лучше оставить нулевым.

cellpadding="0" – отступ текста от границы ячейки. Чтобы таблица выглядела красиво, ставим его равным 5px или 10px: cellpadding="5"

В конкретной теме этот параметр может не работать, т. к. определен в настройках темы, например, так:
table {
border-spacing: 0;
}

В тегах ячеек добавилась ширина ячейки: width="150". Я бы рекомендовал удалить этот параметр целиком. Если ширину не указывать, браузер сам компонует оптимальную ширину для того или иного разрешения монитора в зависимости от размера шрифта.

На практике в большинстве случаев ширина будет присутствовать и в теге <table>, определяя ширину всей таблицы. Тут можно указать 100%, чтобы таблица растягивалась на всю ширину блока с текстом. Или, если таблица уж совсем маленькая и растянутая смотрится некрасиво, можно поставить width="auto", чтобы браузер сам ставил необходимую ширину. Правда, этот параметр задан в теме оформления WordPress и не всегда ваши настройки будут работать. Если ваши указания ширины не работают, но хотелось бы установить именно такие параметры, попробуйте заменить этот параметр на следующий:
style=" width: auto;"
(в этом случае мы задействуем стилевое оформление, которое переопределит настройки темы оформления для данной таблицы).

Параметр valign="top" означает выравнивание по высоте ячейки – сверху. Если его убрать, будет выравнивание по умолчанию, которое в каждой теме может различаться.

Целиком код нашей учебной таблицы должен был получиться таким:

<table border="1" width="100%">

<tbody>

<tr>

<td valign=«top»>Первая ячейка</td>

<td valign=«top»>Вторая ячейка</td>

</tr>

</tbody>

</table>

Или при использовании стилевого оформления границ, ширины, вертикального выравнивания ячеек:

<table style="border: 0; width: 100%;">

<tbody>

<tr>

<td style=«vertical-align: top;»>Первая ячейка</td>

<td style=«vertical-align: top;»>Вторая ячейка</td>

</tr>

</tbody>

</table>

Теперь можно переключиться в режим «Визуально», где наша таблица будет выглядеть так:

Первая ячейка Вторая ячейка

Теперь можно поменять выравнивание ячеек слева-по центру-по правому краю и прочее.

Напоследок, напомню, что работа в режиме «Текст» («html») требует аккуратности и внимания. Если ненароком стереть закрывающие кавычки (обозначают текстовую строку), то всё что пойдет дальше браузер будет считать параметрами тега и не покажет на мониторе. Аналогичный результат будет при нечаянном удалении закрывающей скобки > . А если не будет закрывающего тега, то всё дальнейшее будет вставлено в текущий элемент (таблицу, ячейку) и мы увидим нечто несообразное. Но не боги горшки обжигают, или, как говорят ученики, помучишься — научишься.

Если таблица очень широкая, то браузер никак не сможет вписать ее в ширину колонки с текстом и она продолжится вправо на необходимую ширину, а внизу появится полоса прокрутки (зависит от темы оформления).

Оглавление Далее…

Комментариев: 67

  1. Игорь

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

    • Соколов В.admin

      Ну, у нас тут материал специально для тех, кто начинает осваивать систему.

      Попробуйте вставить в тег table атрибут границы в виде стиля:
      style="border:1px solid #ccc; "
      В нашем последнем примере это выглядело бы так:
      <table cellspacing="0" cellpadding="5px" style="border:1px solid #ccc; width: 100%;">

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

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

      • Игорь

        Здравствуйте!
        Спасибо за ответ, уже разобрались на месте.

  2. Екатерина

    Добрый день!
    Спасибо большое за Ваш сайт, Владимир! Очень толково и понятно для новичков в WordPress!
    у меня аналогичная проблема с таблицей. нет границ. и почему то нет столбцов, хотя в ворде нарисовала красивую табличку и в ней все есть… подскажите, пожалуйста, Владимир, это проблема темы или я что то не так сделала??
    мой сайт allinswiss.com/?page_id=904

  3. Соколов В.admin

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

    • Соколов В.admin

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

      Делаем это так. В левом меню консоли открываем «Внешний вид» >> «Редактор»
      Обычно открывается таблица стилей — style.css (если открыт другой файл, выберите style.css в правом меню)

      Добавьте в самый конец (после закрывающей фигурной скобки) следующий код:
      .linii tr {
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;
      }
      .linii td {
      border-left: 1px solid #999999;
      border-right: 1px solid #999999;
      }

      Обновите файл, затем откройте вашу запись с таблицей и добавьте в тег table атрибут класса:
      class="linii"

      В вашей таблице это может выглядеть так:
      <table class="linii" cellspacing="0" cellpadding="5px">

      Обновите запись.

      Если хотите заменить цвет горизонтальных или вертикальных линий, выберите нужный цвет в фотошопе (выбор цвета, берем значение после решетки, например #000000 — черный) и вставьте в tr или td нашего класса в таблице стилей.

      • Соколов В.admin

        Екатерина, позвольте Вас немного пожурить, пользуясь случаем. У Вас вся таблица отформатирована заголовками 6 уровня: в режиме html (текст) в каждой ячейке теги <h6>

        Я категорически советую избавляться от такого оформления. В Ворде люди привыкают добиваться нужного внешнего вида любым способом — на бумаге этого не видно. Но на сайте заголовок служит не столько для выделения текста, сколько для разметки структуры текста для поисковых роботов. Т.е. роботы после заголовка ждут текст, а если вся таблица состоит из заголовков, то это неправильно, и роботы могут это не одобрить, например, понизить позицию в поиске, за повышение которой люди платят сео-фирмам солидные деньги.

        Поэтому нет смысла работать с начертанием шрифта в Ворде. Перенесли на WordPress, а потом добавляйте курсив, жирный и пр.

  4. Екатерина

    СПАСИБО ВАМ ПРЕОГРОМНЕЙШЕЕ, ВЛАДИМИР!!!!!
    Я только только начинаю «творить » в вордпрессе…и мне безумно трудно во всех тонкостях разбираться….спросить и проконсультироваться не у кого…а вопросов, чем даль, тем все больше и больше…как снежный ком!!!!!
    СПАСИБО ВАМ ЗА ВАШУ ПОМОЩИ И ТАКИЕ БЕСЦЕННЫЕ ЗНАНИЯ!!!!!!
    Какой Вы счастливый — Вы все это знаете!!!!!)))

  5. Екатерина

    все сделала, как Вы написали..но верхняя горизонтальная черта таблицы осталось прежнего цвета и внутри тоже #999999 (((((

    • Соколов В.admin

      Замените весь вставленный код в таблице стилей на следующий:

      .linii
      td {
      border: 1px solid #15C20A !important;
      }

      Мы повышаем приоритет этой записи, чтобы перекрыть цвет горизонтальных полос, который определен в строке 569 (без специального редактора долго искать, я вскоре добавлю пост про редакторы)

      • Екатерина

        Спасибо, Владимир!!! Сделала как Вы научили!!! Все получилось!!!!

  6. Максим

    Спасибо Вам огромное за этот код:
    .linii
    td {
    border: 1px solid #15C20A !important;
    }
    Искал его пол года:)))

    • Соколов В.admin

      Да, в новых темах таблицы стилей сложноватые. Мне в своё время повезло осваивать WordPress с простой темы (этот блог), там было реально разобраться новичку.

  7. Екатерина

    Добрый день, Владимир!
    Помогите, пожалуйста! раньше получалось создавать список фотогалерей на одной странице вот через этот код:
    {slide=Наш 3 Б класс}
    [nggallery id=8]
    {/slide}

    {slide=Наши экскурсии}
    [nggallery id=9]
    {/slide}

    теперь почему то ничего не получается… на странице при просмотре остаются надписи {slide=Наш 3 Б класс}, {/slide} и сами фотографии, а раньше был список как вот на этой странице lib.mgupp.ru/fotogalereya/ (здесь делала я сама …теперь на другом сайте не получается так же сделать)

    • Соколов В.admin

      К сожалению, с этим кодом не работал, как он функционирует — не в курсе. Возможно, на старом сайте он использовал функции, которых нет в файле functions.php темы оформления на новом сайте.

      • Соколов В.admin

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

  8. Екатерина

    Спасибо! Вы как всегда правы! Дело в недостающем плагине Tabs slides!!!!

  9. Наталья

    Владимир, добрый день! Помогите, пожалуйста!
    Сделала, как Вы написали

    Добавьте в самый конец (после закрывающей фигурной скобки) следующий код:
    .linii tr {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    }
    .linii td {
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    }

    Обновите файл, затем откройте вашу запись с таблицей и добавьте в тег table атрибут класса:
    class=»linii»

    В вашей таблице это может выглядеть так:

    Получилось, что внутри таблицы рамка двойная.
    Нашла, что нужно добавить border-collapse: collapse
    Сделала это так
    .table linii {
    border-collapse: collapse
    }
    но рамка все равно двойная.
    Подскажите, как сделать правильно?
    Спасибо заранее!

  10. Наталья

    Нашла ошибку. Должно быть.
    table.linii {
    border-collapse: collapse
    }

    • Соколов В.admin

      Да, т.к. точка перед названием обозначает «класс», следовательно если она стоит перед словом «table», то появляется новый класс с таким названием, а не параметры имеющегося класса «linii» (создать класс с новым названием можно для каждого конкретного случая).

      Вообще-то двойная линия может появляться из-за того, что параметр, задающий отступ не равен нулю. Можно попробовать поставить в теге таблицы:
      <table border="1" cellspacing="0" cellpadding="10">
      или с помощью поиска найти в таблице стилей «cellspacing» и поставить равным нулю.
      И еще: после значения параметра при определении стилей ставится точка с запятой. В Вашем примере на конце она тоже должна быть:
      border-collapse: collapse;

  11. елена

    помогите, пож-та
    с таблицей всё ок. кроме того, что текст располагается по нижнему краю
    корректировала с помощью «свойства ячеек таблицы». в админке выглядит так, как корректирую
    на сайте — по нижнему краю

    • Соколов В.admin

      Если я правильно понял, Вы хотите сделать выравнивание в ячейке вверху?

      Если нужно это сделать для всех ячеек, добавьте в стили тега <table> или <tbody> выравнивание по вертикали, получится так:

      <table style="vertical-align: top;">

      Или в стили таблицы в стилевой таблице, или в стиль ячейки в стилевой таблице:

      vertical-align: top;

      Или нужно найти, где задано выравнивание по низу, оно также может быть задано не стилем, а атрибутом в самой таблице valign=bottom

      Кому интересно, выравнивание по середине задается стилем:

      vertical-align: middle;

    • Соколов В.admin

      Если у вас в консоли выравнивание то, какое нужно, то, видимо, это в стилевой таблице определяется выравнивание по низу, она не влияет на отображение в консоли.

      Для поиска по стилевой таблице, кто затрудняется, выделяем весь её код (сочетание клавиш Ctrl + A), вставляем в редактор (хотя бы php-редактор) и задаем поиск по нужному термину.

      Исправив всё нужное в редакторе, выделяем всё, вставляем в окно редактирования в консоли, сохраняем.

      php-редактор не закрываем, если что-нибудь накосячим, он позволяет откатить назад и сделать, как было.

      • елена

        спасибо за ответ.
        я в html не очень)))
        ситуация странная. потому что запись «прыгает»
        у меня в левой части фото. в правой — кликабельное описание.
        и вот когда фото на 1 строчку ниже текста в соседней ячейке — всё ок. и надпись сверху.
        как только эта строчка пропадает — тоже не понимаю как.
        надпись смещается вниз.

        • Соколов В.admin

          Да, в WordPress автоматическое добавление строк и абзацев дает удобство, но настроить что-то из-за этого порой бывает сложно. Дайте ссылку, попробую посмотреть.

          Это еще может быть связано с тем, задано или нет обтекание изображения текстом. Если не задано, то изображение идет или после текста, или текст с нижнего края изображения. Задается стилем float: left; (или right)

          • елена

            не задано обтекания.
            там просто текст в ячейке

            на закладке наши тренеры мне удалось в такой же таблице боль-мень отрегулировать именно положением фото.
            но только 2=е строки. третья съезжает всё равно

          • Соколов В.admin

            Раз фото и текст в разных ячейках таблицы, значит, обтекание ни при чем. Похоже, у Вас задано положение текста по нижнему краю в таблице стилей. Вам нужно или создать для таблиц с выравниванием не по низу отдельный класс (смотрите комментарии вначале), где прописать нужное выравнивание, и добавить этот класс в нужные таблицы. Или, если нужно по-быстрому, переключите в консоли (админке) режим в текст, найдите нужные фразы и замените тег ячеек перед текстом (он выглядит у вас так: <td valign="top">
            или так: <td valign="middle">)
            на такой:

            <td style="vertical-align: top;">

            Или, если лучше выравнивание по середине:

            <td style="vertical-align: middle;">

            Должен сказать, на этой странице код нужно чистить и чистить. Такое впечатление, что из Ворда вставлен полностью отформатированный текст и всё форматирование сохранилось в коде страницы. Я в таких «сложных случаях» выделяю весь текст в Ворде, ставлю стиль «обычный», после чего удаляю всё форматирование шрифта (сочетание клавиш Ctrl + пробел) и только после этого вставляю в WordPress и форматирую заново. Там столько лишнего кода, больше половины, что трудно найти нужные места.

  12. елена

    спасибо вам.
    я ж не знала. что просто так форматированный текст из ворда не надо вставлять)))
    наоборот даже.
    не вставлялись, например дополнительные строки, убирались при обновлении.

    попробую сделать чегонить

    • елена

      не могу передать вам. как я вас люблю! правда!
      СПАСИБО!

      • Соколов В.admin

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

        Я если при просмотре новой страницы кликаю правой кнопкой мыши «просмотреть исходный код» и вижу, что там много лишних тегов, то быстрее, чем чистить их, убрать всё форматирование в Ворде и вставить еще раз 🙂

  13. Михаил

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

    • Соколов В.admin

      К сожалению, сами только начинаем присматриваться к макинтошам.
      Не скажете, Вы разделяете точку зрения, что они удобнее на порядок? Графический редактор в пакет программ входит или надо отдельно доплачивать?

  14. Михаил

    Не жалею что переехал. Чуть надо привыкнуть. Зато потом — КОСМОС!
    В операционке есть пара редакторов.
    Можно я пришлю Вам код, Вы глянете что и как можно поправить?
    Пробовал Word под Виндой и Pages с TextEditor.

  15. Михаил

    Ура! Получилось! Через Эвернот.

  16. Даша

    Спасибо большое, у меня тоже текст в таблице выравнивался по низу, а по верху, как мне надо было, стояло valign, теперь поставила и все сработало, а то уже весь мозг проел этот вордпресс!!!!!

    • Соколов В.admin

      Будем относиться с пониманием. Разработчики темы старались всё предусмотреть, где-то переборщили 😀

  17. Евгений

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

    • Соколов В.admin

      Здравствуйте, Евгений!
      Посмотрел вашу таблицу, в код пока не заглядывал. Попробуйте стандартный способ https://xn--d1alj.xn--p1ai/table-9
      Если будут проблемы, пишите.

      У Вас надо бы выровнять значения в таблице. Чтобы запятая была под запятой. Проще сделать в столбце одинаковое число знаков после запятой и проставить выравнивание каждой ячейки по правому краю.

      Руками, конечно, долго возиться. Быстрее поставить всему <tbody> выравнивание справа, а ячейкам с текстом добавить выравнивание слева.

      • Соколов В.admin

        Еще раз советую всем скачать редактор NVU. Там ставишь в таблице нужный цвет ячейки, потом переключаешь в режим кода, смотришь в коде, как это делается. Только не забывайте удалять лишние обрывы строки, в WordPress обрыв внутри строки с атрибутами вообще клинит всю страницу.

  18. Александр

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

    • Соколов В.admin

      Фон для таблицы задается аналогично, только вставляется в тег table: https://xn--d1alj.xn--p1ai/table-9

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

      Или может быть проще найти в таблице стилей фон ячеек и строк и удалить.

  19. Елена

    Здравствуйте!
    Подскажите, пожалуйста. как в WordPress внутри ячейки в таблице убрать расстояние между абзацами, которое появляется после нажатия Enter? На других страницах сайта, там, где текст, я хотела бы оставить расстояние между абзацами.
    Заранее спасибо.

    • Соколов В.admin

      Здравствуйте!
      Сначала самый простой и легкий способ. Когда мы хотим начать с новой строки, не начиная новый пункт списка или новый абзац, — нужно нажимать сочетание клавиш «Shift» + «Enter». Это вводит обрыв строки, расстояние будет такое же, как между всеми строками.

      Если же абзацев уже вставлено много и не хочется их все переделывать, тогда нужно убрать отступ между абзацами в таблице. Для этого в консоли > Внешний вид > Редактор открываем файл таблицы стилей style.css и добавляем такой фрагмент, можно в конце:

      table p {
      margin-top: 0;
      margin-bottom: 0;
      }

      Если это уже прописано в таблице стилей, может не сработать. Тогда в редакторе кода (из описанных нами это PHP Expert Editor) открываем файл таблицы стилей style.css (или копируем его в новый файл), в меню нажимаем «Поиск» (кнопка с лупой), вводим букву p (в английской раскладке), слева ставим галочку в опцию «Только слово целиком» и перебирая найденные варианты кнопкой на клавиатуре F3 (или кнопкой в меню: лупа с многоточием) находим стиль для table p (или все возможные части таблицы: tbody p, td p…).

      Отступ определяется атрибутом
      margin: в п н л;
      где первым определяется отступ сверху, затем справа, снизу и слева.

      Если отступ верх-низ право-лево одинаковый, он не повторяется:
      margin: 10px 20px;
      Здесь сверху и снизу 10px, слева и справа 20px.

      Кроме того может быть задан отдельно отступ сверху:
      margin-top: 20px;
      и снизу:
      margin-bottom: 20px;

      Если поиски ничего не дали, укажите для своей новой записи повышенный приоритет:
      margin-top: 0 !important;
      margin-bottom: 0 !important;

      Еще одна причина, почему может не работать стиль — допущена ошибка в таблице стилей, и работает только код до этой ошибки. Можно попробовать вставить новый код ближе к началу.

      Алксандр Левин советует ставить верхний отступ -1em:
      margin-top: -1em;

  20. Елена

    Спасибо Вам большое! Получилось.

Навигация по комментариям



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