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

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. Что делать, если в конкретной публикации не нужны границы таблицы, 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. Находим в стилевом файле и убираем границу ячеек и пр., если она вам в других таблицах не нужна. Но если в стилях прописана граница определенного цвета и она вам нужна в других таблицах, то лучше создать новый класс.

     • работает спс, про 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».

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