Блог «Моя Конда»

Кондинский
    район

Юмас - Кондинский район

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

18.11.2012   Соколов В.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

Далее: фон в таблице

Комментарии

  1. Игорь

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

    • В. Соколов

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

      Попробуйте вставить в тег 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. В. Соколов

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

    • В. Соколов

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

      Делаем это так. В левом меню консоли открываем «Внешний вид» >> «Редактор»
      Обычно открывается таблица стилей — 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 нашего класса в таблице стилей.

      • В. Соколов

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

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

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

  4. Екатерина

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

  5. Екатерина

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

    • В. Соколов

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

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

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

      • Екатерина

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

  6. Максим

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

    • В. Соколов

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

  7. Екатерина

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

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

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

    • В. Соколов

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

      • В. Соколов

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

  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
    }

    • В. Соколов

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

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

  11. елена

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

    • В. Соколов

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

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

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

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

      vertical-align: top;

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

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

      vertical-align: middle;

    • В. Соколов

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

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

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

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

      • елена

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

        • В. Соколов

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

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

          • елена

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

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

          • В. Соколов

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

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

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

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

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

  12. елена

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

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

    • елена

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

      • В. Соколов

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

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

  13. Михаил

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

    • В. Соколов

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

  14. Михаил

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

  15. Михаил

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

  16. Даша

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

    • В. Соколов

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

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

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

 

(комментарий будет опубликован после проверки модератором)



Нажимая на кнопку, вы даете согласие на обработку своих персональных данных