Юмас

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

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

Абзацы в ячейке таблицы

04.02.2014   Елена

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


  1. В. Соколов

    Здравствуйте!
    Сначала самый простой и легкий способ. Когда мы хотим начать с новой строки, не начиная новый пункт списка или новый абзац, — нужно нажимать сочетание клавиш «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;

  2. Елена

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

  3. Елена

    А можно ли в некоторых местах текста внутри ячейки таблицы, там, где это необходимо по смыслу, чуть-чуть увеличить расстояние между строчками? Чтобы расстояние было не такое огромное, как если нажмёшь Enter, а поменьше?

    • В. Соколов

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

      <p style="line-height:1.9em;">Строки внутри
      нашего
      абзаца</p>

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

      <p style="margin-top: 0.5em;">Текст нашего абзаца</p>

      или в пикселях:

      <p style="margin-top: 5px;">

      Обратите внимание, что дробные величины пишутся через точку, а не запятую: 0.5em

      • Алина

        Здравствуйте!
        Вопрос аналогичный, и речь не об абзаце в тексте, а об абзаце в ячейке. И у меня вопрос именно в enter» — как уменьшить интервалы между абзацами именно в ячейке таблицы?

  4. В. Соколов

    Здравствуйте!
    Чтобы уменьшить интервалы для конкретного абзаца, в том числе в таблице, добавляем в тег абзаца отступ ноль:

    <p style="margin: 0;">Текст любого абзаца</p>

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

    <p style="margin-top: 0; margin-bottom: 0;">Текст любого абзаца</p>

    Чтобы это работало для всех таблиц, можно добавить в таблицу стилей (файл style.css в теме оформления) отступ для абзацев в ячейке:

    td p {
    margin: 0;
    }

    Это будет убирать отступ для тех тегов абзаца <p>, которые находятся внутри тега ячейки таблицы <td>

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

    .class1 p {
    margin: 0;
    }

    А в любом теге таблицы, например, <table> или <tbody> добавляем этот класс:
    <table class="class1">
    Так мы уберем отступы для абзацев, заключенных внутри класса class1, что дополнительно позволяет убрать отступ не во всех таблицах, а только в тех, где добавлен этот класс.

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

    Напомню, что приоритеты следующие, по возрастанию:
    class — id — style — теги

    Поэтому, если вы пользуетесь первым вариантом, то придется убедиться, воспользовавшись поиском, что нигде в таблице стилей уже не прописан отступ для абзаца в ячейке. Если не заработало, то прописать отдельно для margin-top и margin-bottom.

    Второй вариант может не работать из-за того, что уже указан отступ для абзаца внутри идентификатора id (#), тегов <table> <tbody> <td>, классов, что займет значительно больше времени.

    Если вместо класса указать id, то приоритет будет выше, но можно будет разместить его только один раз на странице. Можно в таблице стилей указать повышенный приоритет:

    .class1 p {
    margin: 0 !important;
    }

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

    Как уменьшить расстояние между строк таблицы

    Чтобы уменьшить расстояние между строк таблицы внутри абзаца (ячейки, блока), можно добавить параметр, определяющий межстрочное расстояние:

    <p style="line-height: 1.25em;">Текст абзаца, включающий несколько строк</p>

    Или строку в таблице стилей для соответствующего класса или тега:

    .class1 {
    line-height: 1.25em;
    }

    Можно указать все параметры шрифта одной строкой (тип шрифта, размеры/межстрочный интервал, гарнитура):

    .class1 {
    font: normal 1em/1.25em Arial;
    }

  5. Елена

    Как хорошо, что мне встретился Ваш сайт! Долго искала нужную информацию. Спасибо! Буду пробовать.

  6. Борис

    Здравствуйте. Вставил таблицу из Ворда, а границ нет. Что можно сделать?

    Заранее спасибо!

    • В. Соколов

      Здравствуйте.
      Вначале смотрим в режиме «Текст» на тег таблицы (table). Если там стоит border="0" — заменяем на border="1".

      Если не помогает, то открываем в редакторе таблицу стилей и ищем (через поиск редактора) все параметры со словом border, пробуя заменить ноль на 1. (Или может быть быстрее создать класс, вставить его в тег table — смотрите первые комментарии).

      • Борис

        Спасибо большое! Вчера устал видимо, и комментарии первые не увидел, и все-равно не получилось ничего) Сегодня победил проблему.
        Вставил в каждый тег и это style="border: 1px solid #808080".
        Наверно это не совсем правильно, в каждый тег вручную код вставлять? Для этого надо создать класс. Как я понял он создается в таблице стилей, т.е. после обновления темы он слетит и надо заново прописывать?

  7. Борис

    *в каждый тег ТД и ТР

    • В. Соколов

      Прописывать границу в каждый тег IMHO не то чтобы неправильно, но хлопотно.

      Чтобы при обновлении не слетали внесенные изменения в тему, создаем дочернюю тему.
      Для этого в папке wp-content > themes создаем папку с названием темы, скажем, my-site. Копируем в нее стилевой файл из темы, которую Вы используете. Открываем редактором и прописываем в начале, внутри блока, ограниченного /* */

      Theme Name: my-site
      Template: twentyeleven

      — где вместо twentyeleven название папки с Вашей бывшей (материнской) темой

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

      Заходим в меню Темы, дочерняя должна появиться в списке доступных. Активируем дочернюю тему.

      Если понадобится еще какой файл материнской темы (кроме функций) изменить, то копируем его в папку с дочерней темой и меняем (материнскую указываем только в стилевом файле, в остальных не нужно). WordPress автоматически берет файлы дочерней темы, а если их нет, то материнской. Все очень удобно. По крайней мере в родных темах WP.

      • В. Соколов

        Дочернюю тему создаем, если хотим обновлять тему. А если не собираемся пользоваться обновлением, то просто меняем название папки с темой, меняем в стилевом файле название темы — она перестанет обновляться.

        (К примеру, у темы twentyeleven при обновлении почему-то слетал русский язык, так я откатил назад и с тех пор не обновляю)

        • Борис

          ОК. Спасибо! =)

  8. ghoser

    Что делать, если в конкретной публикации не нужны границы таблицы, border="0" не работает?

    • В. Соколов

      По-видимому, у Вас в таблице стилей прописана граница ячейки таблицы. Три варианта:
      1. Для каждой ячейки в таблице прописываем стиль граница ноль:
      <td style="border: 0;">
      Может быть прописана конкретная граница таблицы, tbody или ячейки, тогда придется переписывать каждую:
      <tbody style="border-top: 0;">
      или
      <td style="border: 0; border-top: 0;">

      2. Открываем стилевой файл редактором, создаем класс таблицы (см. предыдущие комментарии), где прописываем отсутствие границ. Присваиваем этот класс нашей таблице:
      <table class="nazvanie">

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

      • ghoser

        работает спс, про css тоже как вариант, не подумал

        Ещe раз спасибо

  9. Сергей

    Спасибо большое! Намучился я с этой таблицей. В стиле везде ноль и для tr и для td и для table, тема Twenty Eleven, в свойствах таблицы тоже границы не прописаны, а границы есть))) причём только горизонтальные. Выставил в коде таблицы тоже не помогло, пришлось вручную все tr и td править на
    и только тогда исчезли полоски. Но теперь интересно — что это было)))

    • В. Соколов

      В Twenty Eleven, да, там горизонтальные линии по умолчанию видны, а остальные надо добавлять в таблице стилей, если нужны. Я давно с этой темой не работал, не помню. Ближе к 700 строке есть такие строки:

      .entry-content td,
      .comment-content td {
      border-top: 0px solid #ddd;

      Попробуйте обнулить нижнюю границу тоже:

      .entry-content td,
      .comment-content td {
      border-top: 0px solid #ddd;
      border-bottom: 0px solid #ddd;

      • Сергей

        Спасибо за ответ! Решил, что проще, при создании новой таблицы, сразу копировать код в редактор и пользоваться функцией — найти и заменить tr на и тоже самое с td, а потом вставлять в код сайта, чтобы избежать неожиданностей)))

        • В. Соколов

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

          Вы обратили внимание, что атрибуты cellpadding и cellspacing устарели, если использовались раньше, нужно и их замену на стилевое оформление предусмотреть. А то при проверке валидности кода валидатор ругается.

        • Сергей

          Код почему-то не вставляется в коменты, напишу без стрелок,
          Найти и заменить:
          <tr> на <tr style="border: 0;"> и <td> на <td style="border: 0;">

          • В. Соколов

            Понятно.

            Большинство движков блокируют вставку кода в комментарии. Чтобы вставить, нужно маскировать код: вместо скобок < > писать &lt; &gt; и пр.

            Это можно быстро делать с помощью редактора NVU (вставляем в режиме обычный — копируем в режиме код), только не забывать удалять переводы строк, которые обильно вставляет NVU, а WP от них выпадает (в коде).

  10. В. Соколов

    А когда в своем блоге приводим примеры кода, окружаем его тегами «code».

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

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

 

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



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